/* ============================================================
   Tokens
   Each skin defines a plain light palette first (so browsers
   without light-dark() still render a working light theme),
   then the @supports block below upgrades it to light + dark.
   ============================================================ */

:root {
  color-scheme: light dark;

  /* a player's pick wins; otherwise the active skin's own colour is used */
  --x: var(--x-pick, var(--x-theme));
  --o: var(--o-pick, var(--o-theme));

  --gap: 8px;
  --radius: 14px;
  --border-w: 2px;
  --stroke-w: 12;
  --hover-lift: -2px;
  --ease: cubic-bezier(.2, .8, .3, 1);
  --mark-filter: none;
  --cell-blur: none;
  --g1: transparent;
  --g2: transparent;
  --num-font: inherit;

  /* Vertical rhythm shrinks on short screens so the board never has to.
     This is what keeps the page inside the viewport without scrolling. */
  --stack-gap: clamp(6px, 1.6vh, 14px);
  --edge-pad: clamp(8px, 2.5vw, 16px);
}

:root[data-theme="light"] { color-scheme: light; }
:root[data-theme="dark"]  { color-scheme: dark; }

/* ---- light fallback palettes ---- */

:root[data-skin="minimal"] {
  --bg:#f7f5f2; --surface:#fff; --line:#e4dfd8; --text:#23201d; --muted:#7c746b;
  --x-theme:#c8465a; --o-theme:#2b7fa8; --accent:#23201d; --shadow-color:rgba(35,32,29,.10);
}
:root[data-skin="glass"] {
  --bg:#eef2fb; --surface:rgba(255,255,255,.6); --line:rgba(255,255,255,.85);
  --text:#1b2338; --muted:#64708c; --x-theme:#e0407a; --o-theme:#3d7bf7; --accent:#2a3352;
  --shadow-color:rgba(60,80,140,.16); --g1:#ffd9ec; --g2:#cfe0ff;
}
:root[data-skin="playful"] {
  --bg:#fff6e6; --surface:#fff; --line:#2b2118; --text:#2b2118; --muted:#7a6a58;
  --x-theme:#ff5a5f; --o-theme:#12b5a5; --accent:#2b2118; --shadow-color:rgba(43,33,24,.18);
}
:root[data-skin="arcade"] {
  --bg:#e8eef0; --surface:#fff; --line:#b9c6cc; --text:#10181c; --muted:#5b6b73;
  --x-theme:#d81b60; --o-theme:#0a90b0; --accent:#10181c; --shadow-color:rgba(16,24,28,.14);
}

/* ---- the same palettes, light + dark ---- */

@supports (color: light-dark(#000, #fff)) {
  :root[data-skin="minimal"] {
    --bg:        light-dark(#f7f5f2, #131315);
    --surface:   light-dark(#ffffff, #1c1c20);
    --line:      light-dark(#e4dfd8, #2c2c32);
    --text:      light-dark(#23201d, #ece9e6);
    --muted:     light-dark(#7c746b, #948e88);
    --x-theme:   light-dark(#c8465a, #ff7186);
    --o-theme:   light-dark(#2b7fa8, #57b6e4);
    --accent:    light-dark(#23201d, #ece9e6);
    --shadow-color: light-dark(rgba(35,32,29,.10), rgba(0,0,0,.45));
  }
  :root[data-skin="glass"] {
    --bg:        light-dark(#eef2fb, #0e1220);
    --surface:   light-dark(rgba(255,255,255,.60), rgba(255,255,255,.07));
    --line:      light-dark(rgba(255,255,255,.85), rgba(255,255,255,.16));
    --text:      light-dark(#1b2338, #eaf0ff);
    --muted:     light-dark(#64708c, #98a4c4);
    --x-theme:   light-dark(#e0407a, #ff6aa8);
    --o-theme:   light-dark(#3d7bf7, #5f9dff);
    --accent:    light-dark(#2a3352, #eaf0ff);
    --shadow-color: light-dark(rgba(60,80,140,.16), rgba(0,0,0,.5));
    --g1:        light-dark(#ffd9ec, #3a1d4d);
    --g2:        light-dark(#cfe0ff, #10305e);
  }
  :root[data-skin="playful"] {
    --bg:        light-dark(#fff6e6, #241c2b);
    --surface:   light-dark(#ffffff, #322843);
    --line:      light-dark(#2b2118, #ffd166);
    --text:      light-dark(#2b2118, #fff3e0);
    --muted:     light-dark(#7a6a58, #b7a6c9);
    --x-theme:   light-dark(#ff5a5f, #ff6b6b);
    --o-theme:   light-dark(#12b5a5, #2ec4b6);
    --accent:    light-dark(#2b2118, #ffd166);
    --shadow-color: light-dark(rgba(43,33,24,.18), rgba(0,0,0,.45));
  }
  :root[data-skin="arcade"] {
    --bg:        light-dark(#e8eef0, #0a0e12);
    --surface:   light-dark(#ffffff, #111820);
    --line:      light-dark(#b9c6cc, #1e2a35);
    --text:      light-dark(#10181c, #d7f5ff);
    --muted:     light-dark(#5b6b73, #6f8794);
    --x-theme:   light-dark(#d81b60, #ff2e88);
    --o-theme:   light-dark(#0a90b0, #22e0ff);
    --accent:    light-dark(#10181c, #22e0ff);
    --shadow-color: light-dark(rgba(16,24,28,.14), rgba(0,0,0,.6));
  }
}

/* ---- per-skin shape and texture ---- */

:root[data-skin="minimal"] { --gap: 1px; --stroke-w: 10; --hover-lift: 0; }
:root[data-skin="glass"]   { --radius: 18px; --cell-blur: blur(14px) saturate(1.4); --border-w: 1px; }
:root[data-skin="playful"] {
  --radius: 22px; --border-w: 4px; --stroke-w: 16; --gap: 10px;
  --hover-lift: -3px; --ease: cubic-bezier(.34, 1.56, .64, 1);
}
:root[data-skin="arcade"] {
  --radius: 6px; --stroke-w: 11;
  --mark-filter: drop-shadow(0 0 7px currentColor);
  --num-font: ui-monospace, SFMono-Regular, Menlo, monospace;
}

/* ============================================================
   Layout

   The page must never scroll: on a phone a stray drag steals a
   tap meant for a cell. So the body is pinned, and the board
   takes whatever height is left over rather than forcing the
   page taller than the viewport.
   ============================================================ */

* { box-sizing: border-box; }

/* A class that sets `display` outranks the `hidden` attribute's UA rule, which
   silently leaks any panel we hide from JS. Settle it once, here. */
[hidden] { display: none !important; }

html, body {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

body {
  position: fixed;          /* the reliable way to pin iOS Safari */
  inset: 0;
  margin: 0;
  background-color: var(--bg);
  background-image:
    radial-gradient(1100px 620px at 12% -10%, var(--g1), transparent 60%),
    radial-gradient(900px 520px at 88% 12%, var(--g2), transparent 62%);
  color: var(--text);
  font: 16px/1.5 ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont,
        "Segoe UI", Roboto, system-ui, sans-serif;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--edge-pad);
  padding-bottom: calc(var(--edge-pad) + env(safe-area-inset-bottom));
  padding-top: calc(var(--edge-pad) + env(safe-area-inset-top));
  -webkit-tap-highlight-color: transparent;
  /* kills the double-tap-to-zoom delay on cells */
  touch-action: manipulation;
  transition: background-color .35s ease, color .35s ease;
}

/* Grid rather than a flex column so a short landscape screen can put the
   board beside the panel instead of below it - same markup, same order for
   screen readers, only the placement changes. */
.app {
  position: relative;
  width: 100%;
  max-width: 440px;
  height: 100%;
  max-height: 760px;
  display: grid;
  grid-template-rows: auto auto minmax(0, 1fr) auto auto;
  grid-template-areas: "header" "scores" "board" "status" "actions";
  gap: var(--stack-gap);
}

header       { grid-area: header; }
.scores      { grid-area: scores; }
.board-wrap  { grid-area: board; }
.status      { grid-area: status; }
.actions     { grid-area: actions; }

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex: none;
}

.title-wrap { display: flex; align-items: baseline; gap: 8px; min-width: 0; }

h1 {
  margin: 0;
  font-size: clamp(1.05rem, 4.5vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -.02em;
  white-space: nowrap;
}
:root[data-skin="arcade"] h1 {
  font-family: var(--num-font);
  letter-spacing: .04em;
  font-size: clamp(.95rem, 4vw, 1.15rem);
}

/* Mode is chosen in the modal, so the play screen needs a reminder of which
   one is live - and, online, of the code to read out. */
.mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  font-family: inherit;
}
.mode-chip .code { font-family: var(--num-font); letter-spacing: .1em; color: var(--text); }
.mode-chip:hover { border-color: var(--muted); color: var(--text); }
.mode-chip[data-live="false"] { opacity: .6; }

.tools { display: flex; gap: 6px; flex: none; }

.icon-btn {
  width: 38px; height: 38px;
  display: grid; place-items: center;
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: var(--cell-blur);
  color: var(--text);
  border-radius: calc(var(--radius) * .7);
  cursor: pointer;
  font-size: 1.02rem;
  line-height: 1;
  padding: 0;
  transition: transform .15s var(--ease), border-color .2s ease;
}
.icon-btn:hover { border-color: var(--muted); }
.icon-btn:active { transform: scale(.92); }
.icon-btn[aria-pressed="false"] { opacity: .45; }
.icon-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- scoreboard ---- */

.scores { display: grid; grid-template-columns: 1fr auto 1fr; gap: 8px; flex: none; }

.player {
  position: relative;
  background: var(--surface);
  backdrop-filter: var(--cell-blur);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: 7px 11px;
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  transition: border-color .25s ease, transform .25s var(--ease), box-shadow .25s ease;
}
.player[data-mark="X"] { color: var(--x); }
.player[data-mark="O"] { color: var(--o); }
.player.active {
  border-color: currentColor;
  box-shadow: 0 0 0 1px currentColor, 0 6px 22px var(--shadow-color);
  transform: translateY(-2px);
}
/* the seat you actually control, when playing online */
.player.you::after {
  content: "you";
  position: absolute;
  top: 5px; right: 8px;
  font-size: .55rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.player.gone { opacity: .5; }

.player-top { display: flex; align-items: center; gap: 6px; min-width: 0; }
.badge { font-weight: 800; font-size: .92rem; width: 18px; flex: none; }

.player-name {
  font-size: .88rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.score {
  font-size: clamp(1.15rem, 5vw, 1.55rem);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  font-family: var(--num-font);
  font-variant-numeric: tabular-nums;
}

.draws {
  background: var(--surface);
  backdrop-filter: var(--cell-blur);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  padding: 7px 12px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  color: var(--muted);
}
.draws .score { font-size: clamp(.95rem, 4vw, 1.25rem); color: var(--muted); }
.draws span:first-child { font-size: .62rem; text-transform: uppercase; letter-spacing: .09em; }

/* ---- board ----
   The wrap absorbs the leftover height; the board is the largest square that
   fits inside it. Container query units measure the wrap, so this holds at any
   viewport without a single media query. */

.board-wrap {
  position: relative;
  min-height: 0;
  min-width: 0;
  container-type: size;
  display: grid;
  place-items: center;
}

.board {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(3, 1fr);
  gap: var(--gap);
  width: min(100cqw, 100cqh);
  height: min(100cqw, 100cqh);
}

/* Older browsers without container queries still get a board that fits. */
@supports not (container-type: size) {
  .board { width: min(100%, 60vh); height: auto; aspect-ratio: 1; }
}

/* minimal reads as one surface divided by hairlines, not nine cards */
:root[data-skin="minimal"] .board {
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
:root[data-skin="minimal"] .cell {
  border: none;
  border-radius: 0;
  box-shadow: none;
}
:root[data-skin="minimal"] .cell:not(:disabled):hover { background: var(--bg); }

.cell {
  position: relative;
  background: var(--surface);
  backdrop-filter: var(--cell-blur);
  border: var(--border-w) solid var(--line);
  border-radius: var(--radius);
  cursor: pointer;
  padding: 14%;
  display: grid;
  place-items: stretch;
  box-shadow: 0 1px 2px var(--shadow-color), 0 8px 22px var(--shadow-color);
  transition: transform .15s var(--ease), border-color .2s ease,
              opacity .35s ease, background .2s ease;
}
.cell:disabled { cursor: default; }
.cell:focus-visible { outline: 3px solid var(--accent); outline-offset: 2px; }
.cell.dim { opacity: .3; }

/* the placed mark and the hover ghost share one grid area,
   so their geometry is identical by construction */
.cell > svg {
  grid-area: 1 / 1;
  width: 100%;
  height: 100%;
  overflow: visible;
  display: block;
}
.cell > svg:not(.ghost) { filter: var(--mark-filter); }

.cell svg path, .cell svg circle {
  fill: none;
  stroke: currentColor;
  stroke-width: var(--stroke-w);
  stroke-linecap: round;
}
svg.x { color: var(--x); }
svg.o { color: var(--o); }

.ghost { opacity: 0; transition: opacity .16s ease; }
@media (hover: hover) {
  .cell:not(:disabled):hover { transform: translateY(var(--hover-lift)); border-color: var(--muted); }
  .cell:not(:disabled):hover .ghost { opacity: .2; }
}
.cell:not(:disabled):active { transform: scale(.97); }

.strike {
  position: absolute;
  height: 6px;
  border-radius: 3px;
  background: var(--accent);
  transform-origin: 0 50%;
  pointer-events: none;
  opacity: .85;
}
:root[data-skin="arcade"] .strike { box-shadow: 0 0 12px var(--accent); }

.confetti {
  position: absolute;
  top: 0;
  width: 9px; height: 14px;
  border-radius: 2px;
  pointer-events: none;
  opacity: 0;
}

/* ---- footer ---- */

.status {
  text-align: center;
  font-size: clamp(.85rem, 3.6vw, 1.02rem);
  font-weight: 600;
  min-height: 1.5em;
  margin: 0;
  flex: none;
}
.status b { font-weight: 800; }
.status .win-x { color: var(--x); }
.status .win-o { color: var(--o); }
.status .countdown { font-weight: 500; font-size: .85rem; color: var(--muted); }
.status .warn { color: var(--muted); font-weight: 500; }

.actions { display: flex; gap: 8px; justify-content: center; flex: none; }

.btn {
  font: inherit;
  font-weight: 600;
  font-size: .88rem;
  padding: 9px 16px;
  border-radius: calc(var(--radius) * .7);
  border: var(--border-w) solid var(--line);
  background: var(--surface);
  backdrop-filter: var(--cell-blur);
  color: var(--text);
  cursor: pointer;
  transition: transform .15s var(--ease), border-color .2s ease;
}
.btn:hover { border-color: var(--muted); }
.btn:active { transform: scale(.96); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.btn.primary { background: var(--accent); color: var(--bg); border-color: var(--accent); }

/* ============================================================
   Settings modal
   Everything that used to crowd the play screen lives here, at
   a size that is actually tappable.
   ============================================================ */

.modal {
  width: min(430px, calc(100% - 24px));
  max-height: min(86dvh, 720px);
  padding: 0;
  border: var(--border-w) solid var(--line);
  border-radius: calc(var(--radius) * 1.1);
  background: var(--bg);
  color: var(--text);
  box-shadow: 0 24px 60px var(--shadow-color), 0 2px 8px var(--shadow-color);
  overflow: hidden;
}
.modal::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(2px); }
.modal[open] { display: flex; flex-direction: column; }

.modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  flex: none;
}
.modal-head h2 { margin: 0; font-size: 1rem; font-weight: 700; }

/* Only this scrolls - never the page behind it. */
.modal-body {
  padding: 4px 16px 16px;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.section { display: flex; flex-direction: column; gap: 8px; }

.section-label {
  font-size: .66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--muted);
}

.section-note { margin: 0; font-size: .7rem; line-height: 1.5; color: var(--muted); }

/* segmented control, used for mode / theme / skin / difficulty */
.seg { display: flex; flex-wrap: wrap; gap: 6px; }

.seg button {
  flex: 1 1 auto;
  min-width: 72px;
  min-height: 40px;
  font: inherit;
  font-size: .78rem;
  font-weight: 600;
  padding: 8px 10px;
  border: 1px solid var(--line);
  background: var(--surface);
  backdrop-filter: var(--cell-blur);
  color: var(--muted);
  border-radius: calc(var(--radius) * .6);
  cursor: pointer;
  transition: color .2s ease, border-color .2s ease, transform .15s var(--ease);
}
.seg button:hover { color: var(--text); border-color: var(--muted); }
.seg button:active { transform: scale(.96); }
.seg button[aria-pressed="true"] {
  color: var(--bg);
  background: var(--accent);
  border-color: var(--accent);
}
.seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- colours: the whole point of the modal, so give them room ---- */

.colour-row { display: flex; flex-direction: column; gap: 7px; }

.colour-row-head {
  display: flex; align-items: center; gap: 7px;
  font-size: .8rem; font-weight: 600;
}
.colour-row-head .badge { font-weight: 800; }
.colour-row[data-mark="X"] .badge { color: var(--x); }
.colour-row[data-mark="O"] .badge { color: var(--o); }

.swatches { display: flex; flex-wrap: wrap; gap: 10px; }

.swatch {
  width: 40px; height: 40px;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 50%;
  background: var(--sw);
  background-clip: padding-box;
  cursor: pointer;
  transition: transform .15s var(--ease), box-shadow .2s ease;
}
.swatch.auto { border-style: dashed; border-color: var(--muted); }
.swatch:hover:not(:disabled) { transform: scale(1.1); }
.swatch[aria-pressed="true"] {
  box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--sw);
}
.swatch:disabled { opacity: .25; cursor: not-allowed; }
.swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 4px; }

/* ---- name fields ---- */

.name-row { display: flex; align-items: center; gap: 8px; }
.name-row .badge { width: 18px; flex: none; font-weight: 800; }
.name-row[data-mark="X"] .badge { color: var(--x); }
.name-row[data-mark="O"] .badge { color: var(--o); }

.name {
  font: inherit;
  font-size: .85rem;
  font-weight: 600;
  color: var(--text);
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .5);
  padding: 9px 11px;
  min-width: 0;
  width: 100%;
  min-height: 40px;
}
.name:focus { outline: none; border-color: var(--muted); }
.name:disabled { opacity: .5; }

/* ---- online panel ---- */

.online { display: flex; flex-direction: column; gap: 10px; }

.room-code {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 14px;
  border: var(--border-w) dashed var(--line);
  border-radius: calc(var(--radius) * .7);
  background: var(--surface);
}
.room-code .code {
  font-family: var(--num-font);
  font-size: 1.5rem;
  font-weight: 800;
  letter-spacing: .16em;
  color: var(--text);
}
.room-code .label {
  font-size: .62rem; text-transform: uppercase; letter-spacing: .08em; color: var(--muted);
}

.join-row { display: flex; gap: 8px; }

.code-input {
  font: inherit;
  font-family: var(--num-font);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  flex: 1 1 auto;
  min-width: 0;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  border-radius: calc(var(--radius) * .5);
  background: var(--surface);
  color: var(--text);
}
.code-input:focus { outline: none; border-color: var(--muted); }
.code-input::placeholder { letter-spacing: .1em; color: var(--muted); opacity: .6; }

.net-status { margin: 0; font-size: .72rem; line-height: 1.5; color: var(--muted); min-height: 1.4em; }
.net-status.bad { color: var(--x); }

/* ---- motion ---- */

@media (prefers-reduced-motion: no-preference) {
  .cell > svg:not(.ghost) path, .cell > svg:not(.ghost) circle {
    stroke-dasharray: var(--len);
    stroke-dashoffset: var(--len);
    animation: draw .34s ease forwards;
  }
  .cell > svg:not(.ghost) path:nth-of-type(2) { animation-delay: .15s; }
  :root[data-skin="playful"] .cell > svg:not(.ghost) { animation: pop .4s var(--ease); }
  .strike { animation: strike .45s var(--ease) forwards; }
  .confetti { animation: fall 1.1s ease-in forwards; }
}

@keyframes draw { to { stroke-dashoffset: 0; } }
@keyframes pop { from { transform: scale(.55); } to { transform: scale(1); } }
@keyframes strike {
  from { transform: rotate(var(--rot)) scaleX(0); }
  to   { transform: rotate(var(--rot)) scaleX(1); }
}
@keyframes fall {
  0%   { opacity: 1; transform: translateY(-10px) rotate(0deg); }
  100% { opacity: 0; transform: translateY(320px) rotate(var(--spin)); }
}

/* A phone held sideways has width to spare and almost no height. Stacked, the
   board would be squeezed to a fraction of the screen; side by side it stays
   playable. */
@media (max-height: 520px) and (orientation: landscape) {
  .app {
    max-width: none;
    max-height: none;
    grid-template-columns: minmax(0, 1fr) clamp(170px, 34vw, 240px);
    grid-template-rows: auto auto minmax(0, 1fr) auto;
    grid-template-areas:
      "board header"
      "board scores"
      "board status"
      "board actions";
    gap: clamp(8px, 2vw, 14px);
  }
  .draws { display: none; }
  .scores { grid-template-columns: 1fr 1fr; }
  .status { align-self: center; }
  /* The side column is too narrow for title + chip + buttons on one line, so
     the chip drops below while the title keeps its place beside the buttons. */
  .title-wrap { flex-wrap: wrap; }
  .mode-chip { flex: 1 1 100%; justify-content: center; }
  .actions { flex-wrap: wrap; }
  .actions .btn { flex: 1 1 auto; padding: 8px 10px; font-size: .78rem; }
}

/* Very short and upright: drop the draws tile before shrinking the board. */
@media (max-height: 560px) and (orientation: portrait) {
  .draws { display: none; }
  .scores { grid-template-columns: 1fr 1fr; }
  .actions .btn { padding: 7px 12px; font-size: .8rem; }
}