/* Inter, self-hosted. SIL Open Font License 1.1, see fonts/OFL.txt.
   Served locally on purpose: no request leaves the browser for a font. */
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:400 800;
  font-display:swap;
  src:url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

:root{
  --bg:#0b0f14;
  --bg-2:#111823;
  --panel:#0f1621;
  --panel-2:#141d2a;
  --line:#1e2a3a;
  --ink:#e7edf5;
  --ink-dim:#93a3b8;
  --accent:#39d98a;
  --accent-2:#2bb673;
  --warn:#ff6b6b;
  --radius:12px;
  --topbar:56px;
  --rail:60px;
  --panel-w:308px;
  --tl:104px;
  --tl-anim:132px;
  --thumb:66px;
  --pal-h:54px;   /* palette height; the lifted pills clear it */
  --shadow:0 10px 30px rgba(0,0,0,.45);
  font-synthesis-weight:none;
}
*{box-sizing:border-box}
html,body{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font-family:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif;
  font-size:14px;line-height:1.45;overflow:hidden;
  -webkit-font-smoothing:antialiased;
  -webkit-tap-highlight-color:transparent;
}
button,input,select,textarea{font:inherit;color:inherit}
h3,h4{margin:0}
kbd{
  background:var(--panel-2);border:1px solid var(--line);border-bottom-width:2px;
  border-radius:5px;padding:1px 5px;font-size:11px;font-family:inherit;color:var(--ink)
}
.muted{color:var(--ink-dim)}

.app{
  position:fixed;inset:0;display:grid;
  grid-template-rows:var(--topbar) 1fr var(--tl);
}
/* grid items default to min-width:auto, which lets the timeline stretch the app
   wider than the phone screen. Pin every row to the container instead. */
.app>*{min-width:0;max-width:100%}

/* ---------- topbar ---------- */
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:0 12px;background:linear-gradient(180deg,#121a25,#0e141d);
  border-bottom:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:10px;min-width:0;flex:0 1 auto;overflow:hidden}
.brand svg{width:26px;height:26px;color:var(--accent);flex:none}
.brand strong{display:block;font-size:13px;letter-spacing:.2px;line-height:1.1}
.brand strong span{color:var(--accent)}
.title-input{
  background:transparent;border:0;border-bottom:1px dashed transparent;
  padding:1px 0;font-size:12px;color:var(--ink-dim);width:190px;max-width:38vw;outline:none
}
.title-input:hover{border-bottom-color:var(--line)}
.title-input:focus{border-bottom-color:var(--accent);color:var(--ink)}

.topbar-actions{display:flex;align-items:center;gap:8px;flex:none}
.seg{display:flex;gap:2px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:2px}
.icon-btn{
  display:grid;place-items:center;width:34px;height:32px;border:0;border-radius:8px;
  background:transparent;cursor:pointer;color:var(--ink);transition:background .15s,color .15s,transform .1s
}
.icon-btn svg{width:19px;height:19px}
.icon-btn:hover{background:#1b2635}
.icon-btn:active{transform:scale(.94)}
.icon-btn:disabled{opacity:.35;cursor:default}
.icon-btn.on{background:var(--accent);color:#06231a}
.btn{
  border:1px solid var(--line);background:var(--panel);border-radius:10px;
  padding:7px 12px;cursor:pointer;font-weight:600;font-size:13px;
  display:inline-flex;align-items:center;gap:6px;transition:background .15s,border-color .15s,transform .1s
}
.btn:hover{background:#1a2433;border-color:#2b3a4f}
.btn:active{transform:scale(.97)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#06231a}
.btn.primary:hover{background:#45e79a}
.btn.tiny{padding:5px 9px;font-size:12px;border-radius:8px}
.btn.danger,.chip.danger{color:#ffb4b4;border-color:#4a2530}
.btn.danger:hover,.chip.danger:hover{background:#2a161c}
.caret{width:14px;height:14px;opacity:.7}
.menu-wrap{position:relative}
.menu{
  position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:238px;
  background:var(--panel-2);border:1px solid var(--line);border-radius:12px;
  padding:6px;box-shadow:var(--shadow)
}
.menu button{
  display:block;width:100%;text-align:left;background:transparent;border:0;border-radius:8px;
  padding:8px 10px;cursor:pointer;font-size:13px
}
.menu button:hover{background:#1c2735}
.menu hr{border:0;border-top:1px solid var(--line);margin:5px 4px}
.only-mobile{display:none}
.m-only,.m-only-inline{display:none}
/* .menu button gana en especificidad a .m-only, asi que en escritorio estos
   cuatro se colaban en el menu duplicando los botones de la barra de arriba. */
.menu button.m-only{display:none}

/* ---------- workspace ---------- */
.workspace{display:grid;grid-template-columns:var(--rail) 1fr var(--panel-w);min-height:0;min-width:0}

.rail{
  background:var(--panel);border-right:1px solid var(--line);
  padding:8px 0;display:flex;flex-direction:column;align-items:center;gap:4px;overflow-y:auto
}
.rail>*{flex:none}   /* flex children shrink by default: without this the rail
                          squashed a 44px tool down to 19px on a short screen
                          instead of scrolling, which is what overflow-y is for */
.rail .tool{
  position:relative;width:44px;height:42px;display:grid;place-items:center;border:0;border-radius:10px;
  background:transparent;color:var(--ink-dim);cursor:pointer;transition:background .15s,color .15s
}
.rail .tool svg{width:22px;height:22px}
.rail .tool:hover{background:#1a2433;color:var(--ink)}
.rail .tool.active{background:var(--accent);color:#06231a}
.rail .tool .sc{position:absolute;right:4px;bottom:3px;font-size:9px;opacity:.55;font-weight:700}
.rail .sep{width:26px;height:1px;background:var(--line);margin:6px 0}
.swatches{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:2px 0}
.swatch{width:19px;height:19px;border-radius:50%;border:2px solid transparent;cursor:pointer;padding:0}
.swatch.active{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.15)}
.widths{display:flex;flex-direction:column;gap:4px;align-items:center;padding-top:2px}
.wbtn{
  width:34px;height:26px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--panel-2);border-radius:8px;cursor:pointer;padding:0
}
.wbtn i{display:block;width:20px;background:var(--ink-dim);border-radius:3px}
.wbtn.active{border-color:var(--accent)}
.wbtn.active i{background:var(--accent)}

.stage{position:relative;background:radial-gradient(120% 90% at 50% 0%,#131c27,#0a0e14);min-width:0;overflow:hidden}
#board{display:block;width:100%;height:100%;touch-action:none;cursor:crosshair}
#board.select-mode{cursor:default}
.stage-hint{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  background:rgba(10,14,20,.82);border:1px solid var(--line);border-radius:20px;
  padding:5px 13px;font-size:12px;color:var(--ink-dim);pointer-events:none;
  opacity:0;transition:opacity .25s;backdrop-filter:blur(6px);
  max-width:min(92vw,520px);text-align:center
}
.stage-hint.show{opacity:1}
.stage-badge{
  position:absolute;left:12px;top:12px;background:rgba(10,14,20,.75);border:1px solid var(--line);
  border-radius:8px;padding:3px 9px;font-size:12px;font-weight:600;color:var(--ink-dim);
  pointer-events:none;backdrop-filter:blur(6px)
}

/* ---------- panel ---------- */
.panel{background:var(--panel);border-left:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.tabs{display:flex;border-bottom:1px solid var(--line);flex:none}
.tab{
  flex:1;background:transparent;border:0;border-bottom:2px solid transparent;
  padding:11px 0;cursor:pointer;color:var(--ink-dim);font-weight:600;font-size:13px
}
.tab.active{color:var(--ink);border-bottom-color:var(--accent)}
.tabpane{display:none;padding:12px;overflow-y:auto;gap:10px;flex-direction:column}
.tabpane.active{display:flex}
.section-title{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-dim);margin-top:4px}

.team-card{background:var(--panel-2);border:1px solid var(--line);border-radius:var(--radius);padding:10px}
.team-head{display:flex;gap:8px;align-items:center;margin-bottom:8px}
.team-name{flex:1;background:transparent;border:0;border-bottom:1px solid var(--line);padding:3px 0;font-weight:700;outline:none}
.team-name:focus{border-bottom-color:var(--accent)}
input[type=color]{
  width:32px;height:28px;padding:0;border:1px solid var(--line);border-radius:8px;
  background:transparent;cursor:pointer;flex:none
}
input[type=color]::-webkit-color-swatch-wrapper{padding:2px}
input[type=color]::-webkit-color-swatch{border:0;border-radius:5px}
.row{display:flex;gap:8px;align-items:center}
.row>*{min-width:0}
select,textarea,input[type=text],input:not([type]),.mini{
  background:#0c131c;border:1px solid var(--line);border-radius:9px;padding:7px 9px;
  outline:none;width:100%;transition:border-color .15s
}
select:focus,textarea:focus,input:focus{border-color:var(--accent)}
.mini{width:56px;flex:none;text-align:center}
textarea{resize:vertical;font-size:13px}
.field{display:flex;flex-direction:column;gap:5px}
.field label{font-size:12px;color:var(--ink-dim);display:flex;justify-content:space-between}
.field output{color:var(--ink);font-weight:600}

.roster{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:5px}
.roster li{
  display:flex;align-items:center;gap:5px;background:#0c131c;border:1px solid var(--line);
  border-radius:8px;padding:3px 6px;font-size:12px;cursor:pointer
}
.roster li.sel{border-color:var(--accent)}
.roster .dotnum{
  width:19px;height:19px;border-radius:50%;display:grid;place-items:center;
  font-size:10px;font-weight:800;color:#fff;flex:none
}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{
  background:var(--panel-2);border:1px solid var(--line);border-radius:20px;
  padding:6px 11px;font-size:12px;cursor:pointer;transition:background .15s,border-color .15s
}
.chip:hover{background:#1c2735;border-color:#2b3a4f}
.switch{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-dim);cursor:pointer}
.switch input{accent-color:var(--accent);width:16px;height:16px}
.tip{font-size:12px;color:var(--ink-dim);background:#0c131c;border:1px dashed var(--line);border-radius:10px;padding:8px 10px;margin:0}
.selected-box{background:var(--panel-2);border:1px solid var(--accent);border-radius:var(--radius);padding:10px;display:flex;flex-direction:column;gap:8px}
[hidden]{display:none!important}
input[type=range]{accent-color:var(--accent);width:100%}

/* ---------- timeline ---------- */
.timeline{
  display:flex;align-items:center;gap:10px;padding:8px 12px;
  background:linear-gradient(180deg,#0e141d,#0b1017);border-top:1px solid var(--line)
}
.transport{display:flex;align-items:center;gap:4px;flex:none;min-width:0}
.icon-btn.play{background:var(--accent);color:#06231a;width:40px;height:36px}
.icon-btn.play:hover{background:#45e79a}
.speed{width:64px;padding:5px 6px;font-size:12px}
.total{font-size:12px;color:var(--ink-dim);min-width:42px;text-align:right}
.frames{display:flex;gap:8px;overflow-x:auto;flex:1;min-width:0;padding:2px;scrollbar-width:thin}
.frame-card{
  position:relative;flex:none;border:2px solid var(--line);border-radius:9px;overflow:hidden;
  cursor:pointer;background:#0c131c;transition:border-color .15s,transform .1s
}
.frame-card canvas{display:block;height:var(--thumb);width:auto}
.frame-card.active{border-color:var(--accent)}
.frame-card:active{transform:scale(.97)}
.frame-card .n{
  position:absolute;left:4px;top:3px;background:rgba(6,10,15,.75);border-radius:5px;
  padding:0 5px;font-size:10px;font-weight:700
}
.frame-card .d{
  position:absolute;right:4px;bottom:3px;background:rgba(6,10,15,.75);border-radius:5px;
  padding:0 5px;font-size:10px;color:var(--ink-dim)
}
.frame-card .x{
  position:absolute;right:3px;top:3px;width:16px;height:16px;border:0;border-radius:50%;
  background:rgba(6,10,15,.75);color:#ffb4b4;font-size:11px;line-height:1;cursor:pointer;display:none
}
.frame-card:hover .x{display:block}
.add-frame{flex:none}

/* ---------- dialogs, toast ---------- */
.dlg{
  border:1px solid var(--line);border-radius:16px;background:var(--panel-2);color:var(--ink);
  padding:20px;max-width:620px;width:calc(100vw - 32px);box-shadow:var(--shadow)
}
.dlg::backdrop{background:rgba(4,7,11,.7);backdrop-filter:blur(3px)}
.dlg h3{font-size:18px;margin-bottom:4px}
.dlg h4{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-dim);margin:14px 0 6px}
.dlg p{margin:6px 0}
.dlg form{margin-top:16px;display:flex;justify-content:flex-end}
.cols{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.keys{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--ink-dim)}
.keys kbd{margin-right:4px}
.lib-list{display:flex;flex-direction:column;gap:8px;max-height:50vh;overflow:auto}
.lib-item{display:flex;align-items:center;gap:10px;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.lib-item .meta{flex:1;min-width:0}
.lib-item strong{display:block;font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lib-item small{color:var(--ink-dim);font-size:11px}
.toast{
  position:fixed;left:50%;bottom:calc(var(--tl) + 16px);transform:translateX(-50%);
  background:var(--accent);color:#06231a;font-weight:600;font-size:13px;
  padding:9px 16px;border-radius:22px;box-shadow:var(--shadow);z-index:80;animation:pop .25s ease
}
.toast.err{background:var(--warn);color:#2b0b0b}
@keyframes pop{from{opacity:0;transform:translate(-50%,8px)}to{opacity:1;transform:translate(-50%,0)}}

/* ---------- responsive ---------- */
@media (max-width:1080px){:root{--panel-w:264px}}
@media (max-width:860px){
  :root{--rail:52px;--tl:96px}
  .only-mobile{display:grid}
  .workspace{grid-template-columns:var(--rail) 1fr}
  .panel{
    position:fixed;top:var(--topbar);right:0;bottom:0;width:min(320px,88vw);z-index:60;
    transform:translateX(101%);transition:transform .22s ease;box-shadow:var(--shadow)
  }
  .panel.open{transform:none}
  .title-input{width:118px;max-width:32vw}
  .brand strong span,.brand strong{display:none}
  .brand svg{width:22px;height:22px}
  #btn-open,#btn-save,#btn-share,#btn-help{display:none}
  .m-only{display:block}
  .menu button.m-only{display:block}
  .m-only-inline{display:inline}
  .wide-only{display:none}
  .topbar{gap:6px;padding:0 8px}
  .topbar-actions{gap:6px}
  .cols{grid-template-columns:1fr}
}
@media (max-width:560px){
  .brand strong{font-size:12px}
  .btn{padding:6px 9px;font-size:12px}
  .total{display:none}
}

/* ============ MiCharla Tac additions ============ */

.brand-text{min-width:0}
.mode-switch{
  display:flex;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:2px;gap:2px;flex:none
}
.mode{
  background:transparent;border:0;border-radius:8px;padding:6px 14px;cursor:pointer;
  color:var(--ink-dim);font-weight:600;font-size:13px;transition:background .15s,color .15s
}
.mode.active{background:var(--accent);color:#06231a}
.lang{
  width:auto;min-width:62px;padding:6px 8px;font-size:12px;background:var(--panel);
  border:1px solid var(--line);border-radius:9px
}

/* token palette floating over the stage */
.palette{
  position:absolute;left:50%;bottom:12px;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px;max-width:min(94%,760px);overflow-x:auto;
  background:rgba(10,15,21,.82);border:1px solid var(--line);border-radius:14px;
  padding:7px 9px;backdrop-filter:blur(8px);box-shadow:var(--shadow);scrollbar-width:thin
}
.palette::-webkit-scrollbar{height:5px}
.palette::-webkit-scrollbar-thumb{background:#2b3a4f;border-radius:3px}
.p-item{
  position:relative;flex:none;width:38px;height:38px;border:1px solid transparent;border-radius:11px;
  background:transparent;cursor:pointer;display:grid;place-items:center;transition:background .15s,border-color .15s,transform .1s
}
.p-item:hover{background:#1b2635}
.p-item:active{transform:scale(.94)}
.p-item.active{border-color:var(--accent);background:#122019}
.p-token{
  width:26px;height:26px;border-radius:50%;display:grid;place-items:center;
  font-size:11px;font-weight:800;color:#fff;border:2px solid rgba(255,255,255,.9)
}
.p-token.away{box-shadow:inset 0 0 0 2px rgba(255,255,255,.55)}
.p-token.gk{border-color:#ffef9f}
.p-sep{width:1px;height:24px;background:var(--line);flex:none;margin:0 2px}
.p-glyph{width:24px;height:24px;color:var(--ink-dim)}
.p-item.active .p-glyph{color:var(--accent)}

.zoomer{
  position:absolute;right:12px;bottom:12px;display:flex;align-items:center;gap:2px;
  background:rgba(10,15,21,.82);border:1px solid var(--line);border-radius:11px;padding:3px;
  backdrop-filter:blur(8px)
}
.zoom-level{
  background:transparent;border:0;color:var(--ink-dim);font-size:12px;font-weight:600;
  padding:0 6px;cursor:pointer;min-width:46px
}
.zoom-level:hover{color:var(--ink)}

.status{
  position:absolute;left:12px;bottom:12px;max-width:min(60vw,420px);
  background:rgba(10,15,21,.82);border:1px solid var(--line);border-radius:20px;
  padding:6px 13px;font-size:12px;color:var(--ink-dim);pointer-events:none;
  backdrop-filter:blur(8px);opacity:0;transition:opacity .2s
}
.status.show{opacity:1}
.status strong{color:var(--accent)}

.empty-card{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  background:rgba(10,15,21,.9);border:1px solid var(--line);border-radius:16px;
  padding:18px 20px;text-align:center;box-shadow:var(--shadow);backdrop-filter:blur(8px);max-width:320px
}
.empty-card h3{font-size:16px;margin-bottom:4px}
.empty-card p{color:var(--ink-dim);font-size:13px;margin:0 0 14px}
.empty-card .row{justify-content:center}

.coach{
  position:absolute;left:50%;bottom:64px;transform:translateX(-50%);
  display:flex;align-items:center;gap:10px;background:var(--accent);color:#06231a;
  border-radius:12px;padding:9px 12px;font-size:13px;font-weight:600;box-shadow:var(--shadow);
  max-width:min(90%,440px);z-index:5
}
.coach p{margin:0}
.coach .btn{background:#06231a;color:var(--accent);border-color:transparent}

/* inspector */
.inspector{border-bottom:1px solid var(--line);padding:10px 12px;display:none;flex-direction:column;gap:8px}
.inspector.on{display:flex}
.insp-head{display:flex;align-items:center;justify-content:space-between;gap:8px}
.insp-title{font-size:12px;text-transform:uppercase;letter-spacing:.7px;color:var(--ink-dim)}
.insp-row{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
.insp-row .mini{width:52px}
.icon-mini{
  width:30px;height:28px;display:grid;place-items:center;border:1px solid var(--line);
  background:var(--panel-2);border-radius:8px;cursor:pointer;color:var(--ink-dim)
}
.icon-mini:hover{color:var(--ink);border-color:#2b3a4f}
.icon-mini.on{border-color:var(--accent);color:var(--accent)}
.icon-mini svg{width:16px;height:16px}
.range-mini{width:78px}

.dot{width:10px;height:10px;border-radius:50%;flex:none}
.chips.tight{margin-top:6px}
.bullets{margin:10px 0 0;padding-left:18px;color:var(--ink-dim);font-size:14px;display:flex;flex-direction:column;gap:6px}
.row.end{justify-content:flex-end;gap:8px}
.lib-search{margin:10px 0}
.lib-item .thumb{width:64px;height:42px;object-fit:cover;border-radius:6px;border:1px solid var(--line);flex:none;background:#0b0f14}
.export-grid{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:12px 0}
.export-card{
  display:flex;flex-direction:column;gap:3px;align-items:flex-start;text-align:left;
  background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:11px 12px;cursor:pointer
}
.export-card:hover{border-color:var(--accent)}
.export-card strong{font-size:13px}
.export-card small{color:var(--ink-dim);font-size:11px}

.frame-card .lbl{
  position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(6,10,15,.9));
  font-size:10px;padding:8px 4px 3px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis
}
.timeline.anim{--tl:var(--tl-anim)}
.app.anim{grid-template-rows:var(--topbar) 1fr var(--tl-anim)}
.app.anim .frame-card canvas{height:calc(var(--thumb) * 1.34)}

:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

@media (max-width:860px){
  .mode-switch{display:none}
  .palette{bottom:8px;padding:5px 7px;max-width:calc(100% - 16px)}
  .zoomer{bottom:calc(8px + var(--pal-h) + 8px);right:8px}
  .p-item{width:34px;height:34px}
  .status{display:none}
  .lang{display:none}
}

/* ============ bigger screens ============
   Everything above is sized for a laptop and only ever shrinks. On a 27"
   monitor that left the pitch huge and the controls around it phone-sized.
   These two steps grow the chrome with the screen. The pitch already scales
   on its own, so it is deliberately untouched here. */

@media (min-width:1600px){
  :root{
    --pal-h:62px;--topbar:64px;--rail:72px;--panel-w:352px;--tl:118px;--tl-anim:150px;--thumb:78px;--radius:13px;
  }
  body{font-size:15px}
  .brand svg{width:30px;height:30px}
  .brand strong{font-size:15px}
  .title-input{font-size:13px;width:230px}
  .mode{padding:8px 18px;font-size:14px}
  .btn{padding:9px 15px;font-size:14px;border-radius:11px}
  .btn.tiny{padding:6px 11px;font-size:13px}
  .icon-btn{width:40px;height:38px}
  .icon-btn svg{width:22px;height:22px}
  .icon-btn.play{width:46px;height:42px}
  .lang{font-size:13px;padding:7px 10px}
  .rail .tool{width:54px;height:50px;border-radius:12px}
  .rail .tool svg{width:26px;height:26px}
  .rail .tool .sc{font-size:10px}
  .swatch{width:23px;height:23px}
  .wbtn{width:42px;height:30px}
  .wbtn i{width:24px}
  .tab{font-size:14px;padding:13px 0}
  .tabpane{padding:14px;gap:12px}
  .chip{font-size:13px;padding:7px 13px}
  .section-title{font-size:12px}
  .p-item{width:44px;height:44px;border-radius:13px}
  .p-token{width:30px;height:30px;font-size:12px}
  .p-glyph{width:27px;height:27px}
  .palette{max-width:min(94%,880px);gap:7px;padding:8px 11px}
  .status,.stage-hint,.stage-badge{font-size:13px}
  .zoom-level{font-size:13px;min-width:52px}
  .total{font-size:13px}
  .speed{width:72px;font-size:13px}
}

@media (min-width:2100px){
  :root{
    --pal-h:72px;--topbar:72px;--rail:82px;--panel-w:400px;--tl:132px;--tl-anim:170px;--thumb:90px;
  }
  body{font-size:16px}
  .brand svg{width:34px;height:34px}
  .brand strong{font-size:17px}
  .title-input{font-size:14px;width:270px}
  .mode{padding:10px 22px;font-size:15px}
  .btn{padding:11px 18px;font-size:15px}
  .icon-btn{width:44px;height:42px}
  .icon-btn svg{width:24px;height:24px}
  .icon-btn.play{width:52px;height:46px}
  .rail .tool{width:62px;height:58px}
  .rail .tool svg{width:30px;height:30px}
  .swatch{width:27px;height:27px}
  .wbtn{width:48px;height:34px}
  .wbtn i{width:28px}
  .tab{font-size:15px;padding:15px 0}
  .chip{font-size:14px;padding:8px 15px}
  .p-item{width:50px;height:50px}
  .p-token{width:34px;height:34px;font-size:13px}
  .p-glyph{width:31px;height:31px}
  .palette{max-width:min(94%,1000px);gap:8px;padding:9px 13px}
  .status,.stage-hint,.stage-badge{font-size:14px}
}

/* The three pills along the bottom of the stage (tool hint, token palette,
   zoom) are each positioned from their own corner, so on a tighter stage the
   centred palette runs into the other two. iPad landscape hit this: the first
   token sat underneath the hint. Lift the two secondary pills one row and
   leave the bottom band to the palette. */
@media (max-width:1400px){
  .status,.zoomer{bottom:calc(12px + var(--pal-h) + 10px)}
}

/* ============ touch ============
   iPad, and any touchscreen. Every target here was under 44px, some as small
   as 19px, which is a coin-flip with a finger. */
@media (pointer:coarse){
  :root{--rail:76px;--pal-h:64px}
  .rail .tool{width:60px;height:48px}
  .rail .tool svg{width:26px;height:26px}
  .swatch{width:34px;height:34px;border-width:3px}
  .swatches{gap:7px}
  .wbtn{width:56px;height:40px}
  .icon-btn{width:46px;height:44px}
  .icon-btn svg{width:22px;height:22px}
  .icon-btn.play{width:54px;height:46px}
  .btn{padding:11px 16px;min-height:44px}
  .btn.tiny{padding:9px 13px;min-height:40px}
  .mode{padding:11px 18px}
  .tab{padding:16px 0}
  .chip{padding:10px 15px;min-height:40px}
  .p-item{width:48px;height:48px}
  .p-token{width:32px;height:32px}
  .p-glyph{width:28px;height:28px}
  .switch input{width:22px;height:22px}
  .lang{padding:10px 12px;min-height:44px}
  .speed{min-height:40px}
  input[type=color]{width:44px;height:38px}
  select,textarea,input[type=text],input:not([type]){padding:10px 11px}
  /* hover never fires on a touchscreen, so this delete button was unreachable */
  .frame-card .x{display:block;width:28px;height:28px;font-size:15px;right:5px;top:5px}
  .roster li{padding:7px 10px}
  .zoom-level{padding:10px 8px;min-width:56px;font-size:13px}
  .zoomer{padding:4px}
}

/* A landscape tablet is wide but short: fourteen tools stacked in one column
   ran ~400px past the bottom of the rail, so the eraser and the colours were
   only reachable by scrolling a toolbar most people never think to scroll.
   Two columns fit the whole set on screen. Portrait tablets are tall enough
   to keep the single column, and keep their width for the pitch. */
@media (pointer:coarse) and (max-height:1100px) and (min-width:861px){
  :root{--rail:158px}
  .rail{
    display:grid;grid-template-columns:repeat(2,1fr);gap:6px;
    justify-items:center;align-content:start;padding:8px 6px
  }
  .rail .tool{width:100%;max-width:64px}
  .rail .sep{grid-column:1/-1;width:80%}
  .rail .swatches{grid-column:1/-1;grid-template-columns:repeat(4,32px);justify-content:center;width:100%;gap:6px}
  .rail .swatch{width:32px;height:32px}
  .rail .widths{grid-column:1/-1;flex-direction:row;justify-content:center;width:100%;gap:6px}
}

/* A touchscreen on a big monitor gets both blocks; keep the rail wide enough
   for the larger tool button either way. */
/* A phone is a touchscreen too, but 390px of width cannot spare a 76px rail.
   Keep it narrow there and let the rail scroll as it already did. The cutoff
   is 700px, not the 860px the layout uses: a portrait iPad is 820px wide and
   lands on the mobile layout, but it is still a tablet and should get tablet
   sized controls, not phone ones. Its panel is an overlay there, so the wider
   rail costs the pitch nothing. */
/* La pista de "doble toque para salir" vivia en la barra de estado, que estaba
   oculta por debajo de 860px. En una tablet hay sitio de sobra y es justo donde
   no existe la tecla Esc, asi que ahi se muestra. En el telefono sigue oculta. */
@media (pointer:coarse) and (min-width:700px){
  .status{display:block}
}

@media (pointer:coarse) and (max-width:700px){
  :root{--rail:58px}
  .rail .tool{width:50px;height:44px}
  .rail .tool svg{width:23px;height:23px}
  .swatch{width:22px;height:22px}
  .swatches{gap:5px}
  .wbtn{width:40px;height:30px}
}

@media (pointer:coarse) and (min-width:1600px){:root{--rail:84px;--pal-h:68px}}
@media (pointer:coarse) and (min-width:2100px){:root{--rail:92px;--pal-h:76px}}