/* The left pages Ayuda (H), Ajustes, Tu ficha and Tu equipo in the navy style (docs/features/game-menu.md#left-pages), the mocks
   approved on 22 October 2026: each draws its own header row (ui/sidebar.js pageHead) in an .sx-view (game.css), so the
   red page header is hidden. Like the AI sheet and the journal, each page is a fixed composition the size of its mock's
   window inside the frame (Ayuda 1068 x 692, Ajustes and Tu ficha 1068 x 748: a 16-pixel navy margin, 12-pixel gaps)
   that panels.js fitSheet scales to the panel and centres (.ai-fit); a narrow panel (a phone) flows and scrolls
   (.is-flow). Red is only an accent (the number circles, the slider fill, the look bar, the chosen look); gold is for
   the Set and arrow buttons. */
#game-column:has(#left-panel:is([data-view=help],[data-view=settings],[data-view=character],[data-view=team]):not([hidden])){border-color:#0f1820;border-radius:20px;box-shadow:0 0 0 2px #0f1820;background:#22303c}
@media(min-width:661px){#game-column:has(#left-panel:is([data-view=help],[data-view=settings],[data-view=character],[data-view=team]):not([hidden])){min-height:0}body:has(#left-panel:is([data-view=help],[data-view=settings],[data-view=character],[data-view=team]):not([hidden])) #game-sidebar{min-height:0;overflow-y:auto}}
#left-panel:is([data-view=help],[data-view=settings],[data-view=character],[data-view=team]){overflow:hidden;background:#22303c;color:#22303c;font-weight:400;box-shadow:inset 0 2px #3a4a58}
#left-panel:is([data-view=help],[data-view=settings],[data-view=character],[data-view=team])>:is(.panel-header,.panel-description){display:none}
#left-panel:is([data-view=help],[data-view=settings],[data-view=character],[data-view=team]) .panel-content{display:flex;flex:1;min-height:0;width:100%;max-width:none;margin:0;padding:0}
.ai-fit>.pg-view{position:absolute;left:50%;top:50%;width:1068px;height:748px;padding:16px;gap:12px;border-radius:0;background:none;transform:translate(-50%,-50%);transform-origin:50% 50%}
.ai-fit>.pg-help{height:692px}
.ai-fit>.pg-card.is-short{height:auto}
.pg-head h2{margin:0}
.pg-head .sx-title{line-height:1.1}
.pg-k,#keymap kbd{display:inline-block;padding:0 5px;border:1px solid currentColor;border-radius:4px;background:none;color:inherit;font:11px "Courier New",Courier,monospace}

/* Ayuda: two equal columns, the keys and the four steps */
.pg-grid{display:grid;flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px;min-height:0}
.pg-panel{display:flex;flex-direction:column;gap:10px;min-height:0;padding:14px 16px;overflow:auto}
.pg-keys-table{width:100%;border-collapse:collapse;font-size:13px}
.pg-keys-table :is(th,td){padding:7px 8px;border-bottom:2px dashed #c9b276;vertical-align:middle}
.pg-keys-table th{padding-right:12px;font-weight:400;text-align:left;white-space:nowrap}
.pg-keys-table td{text-align:right}
.pg-steps{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.pg-step{display:flex;align-items:flex-start;gap:10px;padding:10px 12px}
.pg-step b{font-weight:700}
.pg-num{display:grid;flex:none;place-items:center;width:26px;height:26px;border-radius:50%;background:#c84a4a;color:#fff;font:600 14px var(--pix)}
.pg-ranks{display:flex;gap:5px;margin-top:6px!important}
.pg-rk{display:grid;place-items:center;width:26px;height:26px;border:2px solid #0f1820;border-radius:6px;color:#fff;font:600 15px var(--pix)}
:is(.pg-rk,.cd-rk)[data-rank=S]{background:#e0a92a}:is(.pg-rk,.cd-rk)[data-rank=A]{background:#d9776a}:is(.pg-rk,.cd-rk)[data-rank=B]{background:#5b8fc9}
:is(.pg-rk,.cd-rk)[data-rank=C]{background:#6aa05a}:is(.pg-rk,.cd-rk)[data-rank=D]{background:#a99a74}

/* Ajustes: index.html #settings-controls in two columns (language, sound and view, messages | the keys) */
.pg-settings .settings-actions{display:flex;flex-wrap:wrap;gap:8px;margin:0}
.pg-settings .settings-actions[hidden]{display:none}
#left-panel .pg-settings .settings-actions button{min-height:32px;padding:0 12px;border:2px solid #fbe9e2;border-radius:8px;color:#fbe9e2;font-size:13px}
#left-panel .pg-settings .settings-actions button:hover:not(:disabled){border-color:#ffd76a;color:#ffd76a}
#left-panel .pg-settings .settings-actions button:disabled{opacity:.5;cursor:not-allowed}
.pg-settings #settings-controls{display:grid;flex:1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:stretch;gap:12px;min-height:0}
.pg-settings .settings-column{display:flex;flex-direction:column;gap:12px;min-height:0;overflow:auto}
.pg-settings .settings-block{display:flex;flex-direction:column;gap:10px;flex-shrink:0;min-width:0;margin:0;padding:14px 16px;border:4px solid #0f1820;border-radius:12px;background:#fbf6e9;color:#22303c;box-shadow:none}
.pg-settings .settings-block h3{margin:0;color:#5e5232;font:400 16px/1.2 var(--pix)}
.pg-settings .settings-block p{margin:0;color:#5e5232;font-size:12px;line-height:1.45}
.pg-settings .settings-keys{min-height:0;overflow:auto}
.settings-row{display:flex;align-items:center;gap:10px}
.settings-row>label{white-space:nowrap}
.settings-row>select{flex:1;min-width:0;min-height:36px;padding:0 8px;border:2px solid #22303c;border-radius:8px;background:#fff;color:#22303c;font:13px "Courier New",Courier,monospace}
.settings-keys>.settings-row{justify-content:space-between}
#left-panel .pg-settings #keys-reset{min-height:26px;padding:0 10px;border:2px solid #0f1820;border-radius:8px;background:#ffd76a;color:#22303c;font-size:12px;font-weight:700;white-space:nowrap}
#left-panel .pg-settings #keys-reset:hover{background:#ffe48f}
/* the volume and zoom sliders: a red fill (--fill, set by hud.js setSound and app.js writeView) and a red knob */
.settings-slider{gap:12px}
.settings-slider>label{min-width:7ch}
.settings-slider>output{min-width:4ch;text-align:right;font-variant-numeric:tabular-nums}
.settings-slider>input[type=range]{--fill:50%;flex:1;min-width:0;height:22px;margin:0;padding:0;border:0;background:none;-webkit-appearance:none;appearance:none;cursor:pointer}
.settings-slider>input[type=range]::-webkit-slider-runnable-track{box-sizing:border-box;height:8px;border:2px solid #0f1820;border-radius:999px;background:linear-gradient(90deg,#c84a4a var(--fill),#e6dcc3 var(--fill))}
.settings-slider>input[type=range]::-webkit-slider-thumb{box-sizing:border-box;width:18px;height:18px;margin-top:-7px;border:2px solid #0f1820;border-radius:50%;background:#c84a4a;-webkit-appearance:none;appearance:none}
.settings-slider>input[type=range]::-moz-range-track{box-sizing:border-box;height:8px;border:2px solid #0f1820;border-radius:999px;background:#e6dcc3}
.settings-slider>input[type=range]::-moz-range-progress{height:8px;border-radius:999px;background:#c84a4a}
.settings-slider>input[type=range]::-moz-range-thumb{width:14px;height:14px;border:2px solid #0f1820;border-radius:50%;background:#c84a4a}
.settings-slider>input[type=range]:focus-visible{outline:3px solid #2f6fb0;outline-offset:2px}
/* the keys: all twelve buttons, a gold Set button each */
#keymap{width:100%;border-collapse:collapse;font-size:13px}
#keymap td{padding:7px 8px;border-bottom:2px dashed #c9b276}
#keymap td:first-child{white-space:nowrap}
#keymap td:last-child{width:1%;text-align:right}
#keymap kbd{margin-right:4px}
#left-panel .pg-settings #keymap button{min-height:26px;padding:0 10px;border:2px solid #0f1820;border-radius:8px;background:#ffd76a;color:#22303c;font-size:12px;font-weight:700;white-space:nowrap}
#left-panel .pg-settings #keymap button:hover{background:#ffe48f}
#keymap .listening kbd{display:none}#keymap .listening:before{content:var(--key-listening,'Press a key…');color:#c84a4a}
/* the agent connections (multiplayer, in the left column) and, in solo play, the game setup (ROM) */
.pg-settings #settings-controls>details{grid-column:1/-1}
.multiplayer-joined .pg-settings #settings-controls>details{display:none}

/* Tu ficha (ui/card.js): the passport and the badge, the same height side by side, and the look carousel below */
.cd-topwrap{flex:none}
.cd-top{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:14px;min-height:300px}
.cd-top>.cd-badge{order:2}
.cd-badge{position:relative;display:flex;flex-direction:column;min-width:0;overflow:hidden;border:4px solid #0f1820;border-radius:14px;background:#fbfcfd;color:#1b1f24;font-family:Calibri,Carlito,'Segoe UI',sans-serif;container-type:inline-size}
.cd-logo{position:absolute;left:-43px;top:-26px;width:242px;height:201px}
.cd-btop{position:relative;display:flex;gap:12px;padding:16px 22px 0 176px}
.cd-bhead{display:flex;flex:1;flex-direction:column;gap:4px;min-width:0;padding-top:6px}
.cd-bk{color:#1f5fa8;font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.cd-bname{font-size:30px;line-height:1.05;overflow-wrap:anywhere}
.cd-bjob{color:#3a4654;font-size:16px}
.cd-photo{position:relative;flex:none;width:118px;height:132px;overflow:hidden;border:1px solid #1d4f97;background:#2560b4}
.cd-photo img{position:absolute;left:50%;top:50%;width:166px;height:166px;max-width:none;image-rendering:pixelated;transform:translate(calc(-50% + 3px),calc(-50% - 13px))}
.cd-bgrid{position:relative;display:grid;grid-template-columns:auto auto auto;gap:8px 14px;margin:5px 18px 4px}
.cd-bgrid>div{display:flex;flex-direction:column;gap:2px;min-width:0;padding-top:4px;border-top:1px solid #dfe4ea}
.cd-bgrid dt{color:#5f6b78;font-size:10px;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.cd-bgrid dd{display:flex;flex-wrap:wrap;align-items:center;gap:3px;margin:0;font-size:14px;font-weight:700;white-space:nowrap}
.cd-rk{display:inline-grid;flex:none;place-items:center;width:17px;height:17px;border:1.5px solid #0f1820;border-radius:4px;color:#fff;font:600 11px var(--pix);font-style:normal}
.cd-mrow{display:flex;gap:5px}
.cd-mr{display:inline-flex;align-items:center;gap:2px}
.cd-mr.is-zero{opacity:.35}
.cd-xp{display:block;flex-basis:100%;height:5px;margin-top:2px;overflow:hidden;border-radius:99px;background:#e3e7ec}
.cd-xp i{display:block;height:100%;background:#c84a4a}
.cd-bfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:auto;padding:6px 18px;border-top:1px solid #dfe4ea;background:#eef1f5;color:#5f6b78;font:11px "Courier New",Courier,monospace}
.cd-bars{flex:none;width:110px;height:16px;background:repeating-linear-gradient(90deg,#0f1820 0 2px,transparent 2px 4px,#0f1820 4px 7px,transparent 7px 9px)}
@container (max-width:440px){
  .cd-logo{left:-26px;top:-16px;width:145px;height:121px}
  .cd-btop{padding:12px 14px 0 104px}
  .cd-photo{width:86px;height:96px}
  .cd-photo img{width:120px;height:120px;transform:translate(calc(-50% + 2px),calc(-50% - 9px))}
  .cd-bname{font-size:22px}
  .cd-bgrid{grid-template-columns:auto auto;margin:10px 14px}
}
/* the passport: a cream booklet, two pages and a dashed fold; a guru's stamp over a done city */
.cd-pass{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);min-width:0;overflow:hidden;border:4px solid #0f1820;border-radius:14px;background:#fbf6e9;box-shadow:inset 0 0 0 3px #e6dcc3}
.cd-page{display:flex;flex-direction:column;gap:8px;min-width:0;padding:10px 12px}
.cd-page+.cd-page{border-left:3px dashed #c9b276}
.sx-view .cd-ph{display:flex;margin:0}
.cd-ph.is-end{justify-content:flex-end}
.cd-pill{flex:1;padding:8px;border:2px dashed #a99a74;border-radius:10px;background:#f3ead2;color:#5e5232;font:400 13px/normal var(--pix);letter-spacing:.08em;text-align:center;text-transform:uppercase;white-space:nowrap}
.cd-slot{position:relative;display:grid;flex:1;grid-template-columns:50px minmax(0,1fr);align-items:center;gap:10px;min-height:96px;padding:8px 10px;border:2px dashed #a99a74;border-radius:10px}
.cd-guru{justify-self:center;width:48px;height:auto;max-height:80px;object-fit:contain;image-rendering:pixelated}
.cd-who{display:flex;flex-direction:column;gap:2px;min-width:0}
.cd-who b{color:#22303c;font:600 15px var(--pix)}
.cd-who span{color:#5e5232;font:12px "Courier New",Courier,monospace}
.cd-slot.is-todo .cd-guru{filter:grayscale(1) opacity(.45)}
.cd-stamp{position:absolute;right:4px;top:50%;width:104px;height:104px;margin-top:-52px;transform:rotate(var(--tilt,-12deg));opacity:.9;mix-blend-mode:multiply;pointer-events:none}
.cd-ph-av{display:grid;place-items:center;justify-self:center;width:42px;height:52px;border:2px dashed #b9aa82;border-radius:10px;color:#b9aa82;font:600 20px var(--pix)}
.cd-ph-l{display:block;width:80%;height:9px;margin-top:4px;border-radius:99px;background:#e0d4b5}
.cd-ph-l.is-short{width:55%}
/* the closed passport, before the first guru: muted blue-greys, no gold */
.cd-pass.is-closed{grid-template-columns:minmax(0,1fr);place-items:center;border:4px dashed #4a5d6e;background:#2c3d4c;box-shadow:none}
.cd-cover{display:flex;flex-direction:column;align-items:center;gap:10px;padding:16px;color:#8fa0b0;text-align:center}
.cd-cover b{max-width:9em;font:600 30px/1.1 var(--pix);letter-spacing:.06em;text-transform:uppercase}
.cd-ck{color:#6f8294;font:600 13px var(--pix);letter-spacing:.2em}
.cd-em{display:grid;place-items:center;width:58px;height:58px;border:3px dashed #6f8294;border-radius:50%;font-size:28px}
.cd-cover small{max-width:16em;font:12px/1.4 "Courier New",Courier,monospace}
/* the look carousel: a red title bar, 2 rows and 4 whole columns, round gold arrows outside the tiles */
.cd-looks{position:relative;display:flex;flex:1;flex-direction:column;min-height:0;overflow:hidden;border:4px solid #0f1820;border-radius:12px;background:#fbf6e9}
.sx-view .cd-lbar{display:flex;align-items:baseline;gap:12px;margin:0;padding:8px 14px;border-bottom:4px solid #0f1820;background:#c84a4a;color:#fff;font:600 17px var(--pix)}
.cd-lbar small{flex:1;color:#fbe3dc;font:12px "Courier New",Courier,monospace;text-align:right}
.cd-car{position:relative;display:flex;flex:1;min-height:0}
.cd-grid{display:grid;flex:1;min-width:0;grid-auto-flow:column;grid-template-rows:minmax(0,1fr) minmax(0,1fr);grid-auto-columns:calc((100% - 30px) / 4);gap:10px;margin:0 62px;padding:12px 0;overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;cursor:grab}
.cd-grid::-webkit-scrollbar{display:none}
.cd-grid.is-dragging{scroll-snap-type:none;cursor:grabbing}
.cd-grid>.panel-empty{grid-row:1/-1;padding:20px}
#left-panel .sx-view .cd-look{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;min-width:0;min-height:0;padding:8px 4px;border:3px solid #22303c;border-radius:10px;background:#fff;color:#22303c;font-size:12px;text-align:center;scroll-snap-align:start;scroll-snap-stop:always;cursor:inherit;user-select:none}
#left-panel .sx-view .cd-look:hover{background:#f3ead2}
#left-panel .sx-view .cd-look[aria-pressed=true]{border-color:#c84a4a;background:#fbeceb;box-shadow:0 0 0 3px #c84a4a44}
.cd-look img{flex:0 1 auto;width:auto;height:84px;min-height:0;max-height:100%;image-rendering:pixelated;-webkit-user-drag:none;pointer-events:none}
.cd-look picture{display:contents}
.cd-look span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cd-look em{display:none;position:absolute;top:6px;right:6px;padding:1px 7px;white-space:nowrap;border:2px solid #0f1820;border-radius:99px;background:#c84a4a;color:#fff;font:600 11px var(--pix);font-style:normal}
.cd-look[aria-pressed=true] em{display:block}
/* a look that another player wears: locked, with the wearer's name */
#left-panel .sx-view .cd-look.is-taken{border-color:#b9aa82;background:#efe8d6;color:#6b6250;cursor:not-allowed}
#left-panel .sx-view .cd-look.is-taken:hover{background:#efe8d6}
.cd-look.is-taken img{opacity:.45;filter:grayscale(1)}
.cd-look b{position:absolute;top:6px;left:6px;right:6px;overflow:hidden;padding:1px 6px;text-overflow:ellipsis;white-space:nowrap;border:2px solid #0f1820;border-radius:99px;background:#22303c;color:#fbf6e9;font:600 11px var(--pix)}
#left-panel .sx-view .cd-nav{position:absolute;top:50%;z-index:2;display:grid;place-items:center;width:34px;height:34px;margin-top:-17px;border:3px solid #0f1820;border-radius:50%;background:#ffd76a;color:#22303c;font:700 20px/1 sans-serif;text-align:center}
#left-panel .sx-view .cd-nav:hover:not(:disabled){background:#ffe48f}
#left-panel .sx-view .cd-nav:disabled{border-color:#b9aa82;background:#e6dcc3;color:#b9aa82;cursor:default}
.cd-nav.is-prev{left:10px}.cd-nav.is-next{right:10px}
.cd-dots{display:flex;justify-content:center;gap:6px;padding:0 0 10px}
.cd-dots i{width:9px;height:9px;border:2px solid #0f1820;border-radius:50%;background:#e6dcc3}
.cd-dots i.is-on{background:#c84a4a}
.cd-looks .character-status{position:absolute;right:12px;bottom:6px;margin:0;padding:1px 10px;border:2px solid #3f8a4f;border-radius:999px;background:#eef5e8;color:#2c5220;font-size:12px}
@media(prefers-reduced-motion:reduce){.cd-grid{scroll-behavior:auto}}

/* a narrow panel (a phone, .is-flow): one column, the page flows and scrolls inside the display */
#left-panel:is([data-view=help],[data-view=settings],[data-view=character],[data-view=team]):has(.ai-fit.is-flow){overflow:auto}
#left-panel:is([data-view=help],[data-view=settings],[data-view=character],[data-view=team]):has(.ai-fit.is-flow) .panel-content{flex:1 0 auto}
.ai-fit.is-flow:has(>.pg-view){flex:1 0 auto;overflow:visible}
.ai-fit.is-flow>.pg-view{position:static;width:auto;height:auto;min-height:auto;padding:10px;transform:none}
.is-flow :is(.pg-grid,.pg-settings #settings-controls,.cd-top){grid-template-columns:minmax(0,1fr)}
.is-flow :is(.pg-settings .settings-column,.pg-settings .settings-keys,.pg-panel){max-height:none;overflow:visible}
.is-flow .cd-top{min-height:0}
.is-flow .cd-top>.cd-badge{order:0;min-height:260px}
.is-flow .cd-top>.cd-pass{order:1}
.is-flow .cd-pass{min-height:300px}
.is-flow .cd-looks{flex:none}
.is-flow .cd-grid{height:300px;grid-auto-columns:calc((100% - 18px) / 4);gap:6px;margin:0 42px}
#left-panel .is-flow .sx-view .cd-nav{width:28px;height:28px;margin-top:-14px;font-size:16px}
.is-flow .cd-nav.is-prev{left:6px}.is-flow .cd-nav.is-next{right:6px}
.is-flow .cd-look img{height:44px}
.is-flow .cd-look em{top:3px;right:3px;padding:0 4px;font-size:9px}
.is-flow .cd-look b{top:3px;left:3px;right:3px;padding:0 4px;font-size:9px}
.is-flow .cd-lbar small{display:none}

/* Tu equipo (ui/team-page.js, the board P17 of 23 October 2026): 1068 x 748 like Tu ficha. The header row (the name
   renamed in place, «Cambiar estandarte»), the banner strip, one card per member (the cream top joined by an ink line
   to the AI on its type colour, game.css --type-N) and the team's open challenges on the right (only that column
   scrolls). Offline members are dimmed. */
.ai-fit>.pg-team{gap:10px}
.pg-team>*{flex-shrink:0}
.tm-hd .tm-head{gap:14px}
.tm-title{display:flex;align-items:center;gap:8px;min-width:0}
.tm-title>span{min-width:0;overflow:hidden;text-overflow:ellipsis}
.pg-team .tm-title.is-long{font-size:18px}
#left-panel .sx-view .tm-pen{display:grid;flex:none;place-items:center;width:28px;height:28px;border:2px solid #fbe9e2;border-radius:8px;color:#fbe9e2}
#left-panel .sx-view .tm-pen:hover{border-color:#ffd76a;color:#ffd76a}
.tm-pen svg,.tm-ban svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linejoin:round}
#left-panel .sx-view .tm-ban{display:inline-flex;flex:none;align-items:center;gap:6px;min-height:34px;padding:0 12px;border:3px solid var(--ink);border-radius:9px;background:#ffd76a;color:#22303c;font:600 13px var(--pix);white-space:nowrap}
#left-panel .sx-view .tm-ban:hover:not(:disabled){background:#ffe48f}
#left-panel .sx-view .tm-ban:disabled{opacity:.6;cursor:default}
.tm-ren{display:flex;align-items:center;gap:8px}
.pg-team .tm-ren input,#left-panel .pg-team .tm-ren input{width:260px;min-height:0;box-shadow:none;height:34px;padding:0 10px;border:3px solid #ffd76a;border-radius:8px;background:#fff;color:#22303c;font:600 18px var(--pix);outline:0}
#left-panel .sx-view .tm-ren .sx-go{min-height:34px}
#left-panel .sx-view .tm-cancel{min-height:30px;padding:0 10px;color:#22303c;font-size:12px}
#left-panel .sx-view :is(.tm-cancel,.tm-ren .sx-go):disabled{opacity:.6;cursor:default}
.tm-status{flex:none;max-width:260px;margin:0;color:#ffd76a;font-size:12px;line-height:1.3}
.tm-status[hidden]{display:none}
/* the banner strip: the banner as the background, the cream card at its bottom left */
.tm-banner{display:flex;align-items:flex-end;height:128px;padding:10px;border:4px solid var(--ink);border-radius:12px;background:#333 center 38%/cover}
.tm-bnc{display:flex;align-items:center;gap:14px;min-width:0;max-width:100%;padding:8px 14px;border:3px solid var(--ink);border-radius:10px;background:var(--cream)}
.tm-bname{min-width:0;max-width:250px;overflow:hidden;color:#22303c;font:600 22px var(--pix);text-overflow:ellipsis;white-space:nowrap}
.tm-pts{color:#5e5232;font:600 15px var(--pix);white-space:nowrap}
.tm-pill{padding:2px 10px;border:2px solid var(--c);border-radius:99px;background:var(--soft);color:var(--c);font:600 12px var(--pix);white-space:nowrap}
.tm-pill.is-kings{--c:#b8432f;--soft:#f6e4de}.tm-pill.is-skilled{--c:#2e7a54;--soft:#e1efe6}.tm-pill.is-league{--c:#2d5f9c;--soft:#e0e9f5}
.tm-stamps{display:flex;flex:none;align-items:center;gap:6px;padding-left:12px;border-left:2px dashed #c9b276}
.tm-stamps small{color:#5e5232;font:600 11px var(--pix)}
.tm-stamp{width:30px;height:30px;object-fit:contain}
.tm-stamp.is-todo{display:grid;place-items:center;border:2px dashed #b9b2a2;border-radius:50%;color:#8a8478;font:600 13px var(--pix)}
/* the members and the challenges */
.pg-team .tm-body{display:grid;flex:1 1 0;grid-template-columns:minmax(0,1fr) 280px;gap:10px;min-height:0}
.tm-mems{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;min-height:0}
.tm-mem{display:flex;flex-direction:column;min-width:0;min-height:0;overflow:hidden;border:4px solid var(--ink);border-radius:12px;background:var(--cream)}
.tm-mem.is-off{opacity:.5}
.tm-mh{display:grid;grid-template-columns:auto minmax(0,1fr);gap:4px 10px;align-items:center;min-width:0;padding:10px}
.tm-look{display:grid;place-items:center;width:62px;height:62px;overflow:hidden;border:2px solid var(--ink);border-radius:10px;background:#fff;color:#22303c;font:600 22px var(--pix)}
.tm-look img{width:52px;image-rendering:pixelated}
.tm-mn{display:flex;flex-direction:column;align-items:flex-start;gap:2px;min-width:0}
.tm-nm{display:flex;align-items:center;gap:6px;max-width:100%;min-width:0}
.tm-nm b{min-width:0;overflow:hidden;color:#22303c;font:600 16px var(--pix);text-overflow:ellipsis;white-space:nowrap}
.tm-nm>span{flex:none}
.tm-mn small{max-width:100%;overflow:hidden;color:#5e5232;font-size:11px;text-overflow:ellipsis;white-space:nowrap}
.tm-cap{display:inline-grid;place-items:center;width:20px;height:20px}
.tm-cap svg{width:18px;height:18px;fill:#ffd76a;stroke:#0f1820;stroke-width:2;stroke-linejoin:round}
.tm-you{padding:0 6px;border:2px solid var(--ink);border-radius:6px;background:#ffd76a;color:#22303c;font:600 11px var(--pix)}
.tm-on,.tm-off{padding:0 8px;border:2px solid;border-radius:99px;font:600 11px var(--pix);white-space:nowrap}
.tm-on{border-color:#2f7d4f;background:#eef5e8;color:#2f7d4f}
.tm-off{border-color:#8a8478;background:#f0efec;color:#5c6068}
/* the AI: the AI sheet's card in small on the type colour (--ai, sidebar.js typeBackground): the header (stage tag, name,
   level), the stage (types at the top left, the moving sprite on its platform), the three bars on a white panel */
.tm-ai{display:flex;flex:1;flex-direction:column;min-height:0;padding:8px 10px 10px;border-top:3px solid var(--ink);background:var(--ai,var(--type-0));color:#fff}
.tm-ai.is-none{align-items:center;justify-content:center;background:#3a4a58}
.tm-ai.is-none p{color:#c9d3df;font-size:12px}
.tm-aiw{display:flex;align-items:center;gap:8px;min-width:0;padding:0 2px 8px}
.tm-aiw b{flex:1;min-width:0;overflow:hidden;color:#fff;font:600 16px/1.2 var(--pix);text-overflow:ellipsis;white-space:nowrap}
.tm-form{flex:none;padding:0 6px;border-radius:4px;background:#ffd76a;color:#22303c;font:600 12px/1.5 var(--pix)}
.tm-lv{flex:none;color:#fff;font-size:12px;white-space:nowrap}
.tm-stage{position:relative;flex:1;min-height:180px;overflow:hidden;border-radius:8px 8px 0 0;background:radial-gradient(circle at 50% 70%,#fff3d6 0,#f6d9a4 55%,#e9b977 100%)}
.tm-types{position:absolute;top:8px;left:8px;z-index:2;display:flex;flex-wrap:wrap;gap:4px}
.tm-ai .sb-type{padding:0 6px;border:2px solid #22303c;border-radius:6px;font:600 11px var(--pix)}
/* the sprite: the whole frame at scale 2 (sidebar.js frameScale), the same for every AI; its bottom 15 px over the
   stage's edge so the frame's feet line stands on the platform's middle; it breathes as the sidebar's sprite */
.tm-plat{position:absolute;left:50%;bottom:14px;width:130px;max-width:80%;height:22px;box-sizing:border-box;border:3px solid #b88540;border-radius:50%;background:#d8a85e;transform:translateX(-50%)}
.tm-stage img,.tm-stage .tm-icon{position:absolute;left:50%;bottom:15px;z-index:1;translate:-50% 0;image-rendering:pixelated;animation:sb-breathe 2.4s ease-in-out infinite;transform-origin:50% 100%}
.tm-stage img{max-width:none}
@media(prefers-reduced-motion:reduce){.tm-stage img,.tm-stage .tm-icon{animation:none}}
.tm-bars{display:grid;gap:6px;padding:8px 10px 10px;border-radius:0 0 8px 8px;background:#fff}
.tm-ai .sb-bar-row{display:grid;grid-template-columns:78px minmax(0,1fr) 44px;gap:6px;align-items:center;margin:0;font-size:11px;font-variant-numeric:tabular-nums}
.tm-ai .sb-bar-row>span:first-child{padding:0 4px;border-radius:4px;background:#22303c;color:#fff;font:600 11px/1.5 var(--pix);text-align:center}
.tm-ai .sb-bar-row:has(.is-hp)>span:first-child{background:#34803f}
.tm-ai .sb-bar-row:has(.is-pot)>span:first-child{background:#ffd76a;color:#22303c}
.tm-ai .sb-bar-row:has(.is-exp)>span:first-child{background:#2f6fb0}
.tm-ai .sb-bar-row b{color:#22303c;font-weight:600;text-align:right;white-space:nowrap}
.tm-ai .sb-bar{height:9px;border:2px solid #22303c;border-radius:6px;background:#eee4cc}
.tm-ai .sb-bar.is-hp{background:#3a4a58}.tm-ai .sb-bar.is-hp i{background:#4fc25a}
.tm-ai .sb-bar.is-pot i{background:#c99a2e}
.tm-ai .sb-bar.is-exp{background:#d6dde4}.tm-ai .sb-bar.is-exp i{background:#2f7fd1}
/* the team's open challenges (the Retos tab's cards, at their natural height); only this column scrolls */
.tm-rt{display:flex;flex-direction:column;gap:10px;min-height:0;overflow:hidden auto;scrollbar-color:#5d6c7a transparent;scrollbar-width:thin}
.tm-rt::-webkit-scrollbar{width:6px}.tm-rt::-webkit-scrollbar-thumb{border-radius:3px;background:#5d6c7a}
.tm-rt>.sb-rc{flex-shrink:0;margin:0 0 3px}
.tm-none{display:flex;flex:1;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:16px;border:2px dashed #5d6c7a;border-radius:12px;background:none;text-align:center}
.tm-q{display:grid;place-items:center;width:40px;height:40px;border:2px dashed #5d6c7a;border-radius:50%;color:#8c9aa7;font:600 18px var(--pix)}
.tm-none b{color:#8c9aa7;font:600 15px var(--pix)}
.tm-none small{color:#7d8b98;font-size:11px}
/* the banner gallery over the page, below the header row */
.tm-picker{position:absolute;inset:70px 16px 16px;z-index:5;display:flex}
.tm-picker[hidden]{display:none}
.tm-picker-box{display:flex;flex:1;flex-direction:column;gap:12px;min-height:0;padding:14px 16px;border:4px solid var(--ink);border-radius:12px;background:var(--cream);box-shadow:0 6px 0 #0f182080}
.tm-picker-hd{display:flex;align-items:center;justify-content:space-between;gap:12px}
.tm-picker-hd h3{color:#22303c;font:600 18px var(--pix)}
.tm-picker-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:max-content;align-content:start;gap:12px;min-height:0;padding:3px;overflow:auto}
#left-panel .sx-view .tm-picker-grid button{display:flex;flex-direction:column;overflow:hidden;border:3px solid var(--ink);border-radius:10px;background:#fff;color:#22303c}
#left-panel .sx-view .tm-picker-grid button[aria-pressed=true]{border-color:#b07a12;box-shadow:0 0 0 3px #ffd76a}
#left-panel .sx-view .tm-picker-grid button:hover:not(:disabled){background:var(--cream2)}
#left-panel .sx-view .tm-picker-grid button:disabled{opacity:.6;cursor:default}
.tm-picker-grid img{display:block;width:100%;height:96px;object-fit:cover}
.tm-picker-grid span{padding:6px 8px;font-size:12px}
/* a narrow panel (a phone): one column; the members two per row, the challenges below */
.is-flow .pg-team .tm-hd .tm-head{flex-wrap:wrap}
.is-flow .tm-bnc{flex-wrap:wrap}
.is-flow .pg-team .tm-body{grid-template-columns:minmax(0,1fr)}
.is-flow .tm-mems{grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.is-flow .tm-mem{min-height:420px}
.is-flow .tm-rt{overflow:visible}
.is-flow .tm-picker{position:fixed;inset:10px}
.is-flow .tm-picker-grid{grid-template-columns:repeat(2,minmax(0,1fr))}