/* Fits Right In. Safari 14.0 (iOS 14) has to draw all of this: no inset, no flex gap, no
   aspect-ratio, and svh only inside @supports. --row (a card's height) is set by the script. */
.game-root[data-game="fits-right-in"] {
  padding: clamp(12px, 2.4vw, 22px);
  background: linear-gradient(180deg, #f6f2ea 0%, #ebe4d6 100%);
  border-color: #dbcfbc;
  text-align: left;
}
.fri {
  --row: 46px; --accent: #d8704f;
  position: relative; box-sizing: border-box; width: 100%; max-width: 560px; margin: 0 auto;
  display: flex; flex-direction: column; color: #33291f;
}
/* Wider than the column: the column's band is painted on the panel's own background, so it runs
   from the panel's top edge to its bottom edge whatever padding the panel has. The band is the
   column's 560px, centred like the column. Under it, the deck's backdrop (--fri-bg, set by the
   script); it is read nowhere else, so below this width it is never fetched. measure() takes the
   column's padding off the room. */
.game-root[data-game="fits-right-in"] { --fri-bg: none; --fri-paper: rgba(250, 246, 238, .9); }
@media (min-width: 641px) {
  .game-root[data-game="fits-right-in"] {
    border-color: #c9b99d;
    background:
      linear-gradient(90deg, transparent calc(50% - 280px), var(--fri-paper) calc(50% - 280px), var(--fri-paper) calc(50% + 280px), transparent calc(50% + 280px)),
      linear-gradient(90deg, transparent calc(50% - 300px), rgba(30, 20, 10, .3) calc(50% - 280px), transparent calc(50% - 280px)),
      linear-gradient(270deg, transparent calc(50% - 300px), rgba(30, 20, 10, .3) calc(50% - 280px), transparent calc(50% - 280px)),
      var(--fri-bg) center / cover no-repeat,
      linear-gradient(180deg, #e2d7c3 0%, #d3c5ac 100%);
  }
  .fri { padding: 18px 22px 14px; }
}

.fri-bar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.fri-head { flex: 1 1 auto; min-width: 0; }
.fri-level { margin: 0; color: #8a7a66; font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.fri-name-bar {
  margin: 2px 0 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  color: #2e251b; font: italic 700 1.22rem/1.2 Georgia, 'Iowan Old Style', 'Times New Roman', serif;
}
.fri-tools { flex: none; display: flex; align-items: center; margin-left: 10px; }
.fri-tools > * + * { margin-left: 6px; }
.fri-chances { display: inline-flex; align-items: center; margin-right: 4px; }
.fri-dot { width: 8px; height: 8px; margin: 0 2px; border: 2px solid #cdbea6; border-radius: 50%; }
.fri-dot.is-on { border-color: var(--accent); background: var(--accent); }
.fri-ibtn {
  width: 36px; height: 36px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid #d6c8b1; border-radius: 10px; background: #fffaf1; color: #4a3d2f; cursor: pointer;
}
.fri-ibtn:hover { background: #fff3df; }
.fri-icon { flex: none; width: 20px; height: 20px; }
.fri-ask { margin: 6px 0 10px; color: #6f604e; font-size: .9rem; font-weight: 600; }

/* A card: the deck's colour down its left edge, the name, and the value once it is on the line. */
.fri-card {
  position: relative; box-sizing: border-box; height: var(--row); display: flex; align-items: center;
  padding: 0 10px 0 16px; border-radius: 10px; background: #fffdf8; color: #2e251b;
  box-shadow: 0 2px 6px rgba(60, 44, 26, .14);
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
  transition: transform .34s cubic-bezier(.2, .8, .3, 1), box-shadow .25s ease;
}
.fri-card::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  border-radius: 10px 0 0 10px; background: var(--accent);
}
.fri-n { flex: 1 1 auto; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: .95rem; font-weight: 800; }
.fri-s { flex: none; margin-left: 8px; color: #9a8b78; font-size: .74rem; font-weight: 700; white-space: nowrap; }
.fri-v {
  flex: none; margin-left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--accent); color: #fff;
  font-size: .8rem; font-weight: 800; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.fri-q { background: #e9e0d0; color: #8a7a66; }
.fri-line .fri-card { cursor: pointer; }
.fri-card.is-right { box-shadow: 0 0 0 3px #5bb27a, 0 4px 12px rgba(60, 44, 26, .18); }
.fri-card.is-wrong .fri-v { background: #df9a2f; }
.fri-card.is-sing { animation: fri-sing .55s ease; }
@keyframes fri-sing {
  0% { transform: none; }
  35% { transform: translateX(8px) scale(1.02); box-shadow: 0 0 0 3px var(--accent), 0 6px 16px rgba(60, 44, 26, .22); }
  100% { transform: none; }
}

/* The card in hand. */
.fri-handbox { display: flex; flex-direction: column; align-items: center; margin-bottom: 8px; }
.fri-held { width: 86%; cursor: grab; touch-action: none; box-shadow: 0 8px 18px rgba(60, 44, 26, .22), 0 0 0 2px var(--accent); }
.fri-held.is-lifted { opacity: .25; }
.fri-held.is-deal { animation: fri-deal .32s cubic-bezier(.3, 1.3, .5, 1); }
@keyframes fri-deal { from { opacity: 0; transform: translateY(-10px) scale(.94); } to { opacity: 1; transform: none; } }
.fri-handbox.is-empty .fri-held { visibility: hidden; }
.fri-left { min-height: 1.2em; margin: 5px 0 0; color: #8a7a66; font-size: .78rem; font-weight: 700; }
/* While dragged it hangs off the body, so it carries its own size. */
.fri-float {
  position: fixed; z-index: 1000; margin: 0; pointer-events: none; cursor: grabbing;
  transform: rotate(-1.5deg) scale(1.03); transition: none;
  box-shadow: 0 16px 30px rgba(40, 28, 16, .32), 0 0 0 2px var(--accent);
}

/* The line. A shut gap is a thin rule with a taller invisible hit area; an open one is as tall as
   a card plus the gap. */
.fri-linewrap { display: flex; flex-direction: column; }
.fri-end { margin: 0; color: #9a8b78; font-size: .68rem; font-weight: 800; letter-spacing: .08em; text-align: center; text-transform: uppercase; }
.fri-line { display: flex; flex-direction: column; padding: 6px 0; }
.fri-slot {
  position: relative; z-index: 2; display: block; box-sizing: content-box; width: 100%; height: 10px;
  margin: -5px 0; padding: 5px 0; border: 0; background: none; cursor: pointer; transition: height .18s ease;
}
.fri-slot::after {
  content: ''; position: absolute; left: 20%; right: 20%; top: 50%; height: 2px; margin-top: -1px;
  border-radius: 2px; background: rgba(120, 100, 76, .16);
}
.fri-slot:hover::after { background: var(--accent); }
.fri-slot.is-open { height: calc(var(--row) + 10px); }
.fri-slot.is-open::after {
  left: 4%; right: 4%; top: 10px; bottom: 10px; height: auto; margin-top: 0; box-sizing: border-box;
  border: 2px dashed var(--accent); border-radius: 10px; background: rgba(255, 255, 255, .55);
}

.fri-fact {
  min-height: 2.7em; margin: 10px 0 0; padding: 8px 12px; border-radius: 10px; background: rgba(255, 255, 255, .6);
  color: #5e5040; font-size: .86rem; line-height: 1.35; text-align: center;
}
.fri-fact strong { color: #2e251b; }
.fri-fact.is-slip strong { color: #b06f12; }
.fri-nav { display: flex; align-items: center; justify-content: center; margin-top: 8px; }
.fri-step {
  width: 30px; height: 30px; padding: 0; display: inline-flex; align-items: center; justify-content: center;
  border: 0; background: none; color: #4a3d2f; cursor: pointer;
}
/* A level arrow that cannot be pressed is not shown, but keeps its room. */
.fri-step:disabled { visibility: hidden; }
.fri-where { min-width: 3.6em; color: #4a3d2f; font-size: .88rem; font-weight: 700; text-align: center; font-variant-numeric: tabular-nums; }

.fri-hand {
  position: absolute; left: 0; top: 0; z-index: 30; pointer-events: none; width: 46px; height: 49px;
  margin: -3px 0 0 -16px; transform-origin: 34.4% 5.9%; transition: transform .12s ease;
}
.fri-hand.is-down { transform: scale(.86); }
.fri-hand[hidden], .fri-ghost[hidden] { display: none; }
.fri-hand svg { display: block; width: 100%; height: 100%; filter: drop-shadow(0 3px 4px rgba(0, 0, 0, .4)); }
.fri-ghost {
  position: absolute; z-index: 29; pointer-events: none; box-sizing: border-box; height: var(--row);
  display: flex; align-items: center; padding: 0 10px 0 16px; border-radius: 10px; background: #fffdf8; color: #2e251b;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .25), 0 0 0 2px var(--accent);
}

.fri-win {
  position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  display: flex; align-items: center; justify-content: center; padding: 10px; background: rgba(43, 36, 28, .32);
}
.fri-win:empty { display: none; }
.fri-box {
  width: 100%; max-width: 350px; max-height: 100%; overflow-y: auto; padding: 16px 20px;
  border-radius: 18px; background: #fffaf1; color: #3b3025; text-align: center;
  box-shadow: 0 16px 40px rgba(40, 28, 16, .35); animation: fri-pop .34s cubic-bezier(.3, 1.4, .5, 1);
}
@keyframes fri-pop { from { opacity: 0; transform: scale(.88); } to { opacity: 1; transform: scale(1); } }
.fri-card-title { margin: 0 0 6px; color: #8a5a17; font-size: .92rem; font-weight: 800; }
.fri-card-name { margin: 0; color: #2e251b; font: italic 700 1.3rem/1.25 Georgia, 'Iowan Old Style', 'Times New Roman', serif; }
.fri-card-line { margin: 6px 0 0; color: #6f604e; font-size: .92rem; line-height: 1.4; }
.fri-card-small { margin: 6px 0 0; color: #a3968a; font-size: .8rem; }
.fri-card-btns { display: flex; flex-wrap: wrap; justify-content: center; margin: 6px -4px 0; }
.fri-card-btns > * { margin: 8px 4px 0; }
.fri-card-btn { display: inline-flex; align-items: center; }
.fri-card-btn > .fri-icon { width: 18px; height: 18px; margin-right: 6px; }
.fri-feel { margin: 14px 0 0; color: #6f604e; font-size: .86rem; font-weight: 700; }
.fri-moods { display: flex; flex-wrap: wrap; justify-content: center; margin: 2px -3px 0; }
.fri-moods > * { margin: 6px 3px 0; }
.fri-mood {
  display: inline-flex; align-items: center; padding: 6px 11px; border: 1px solid #d6c8b1; border-radius: 999px;
  background: #fff; color: #4a3d2f; font: inherit; font-size: .82rem; font-weight: 700; cursor: pointer;
}
.fri-mood > .fri-icon { width: 18px; height: 18px; margin-right: 5px; }
.fri-mood.is-on { border-color: #8a5a17; background: #fdf0d6; color: #8a5a17; }
.fri-note { min-height: 1.3em; margin: 8px 0 0; color: #6f604e; font-size: .8rem; line-height: 1.4; }
.fri-note kbd { padding: 1px 5px; border: 1px solid #d6c8b1; border-radius: 4px; background: #fff; font: inherit; font-size: .78rem; }

.fri-review { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; margin: 10px 0; color: #6f604e; font-size: .82rem; }
.fri-review > * { margin: 4px; }
.fri-review select, .fri-review button { padding: 4px 8px; border: 1px solid #ccc; border-radius: 8px; background: #fff; font: inherit; }

/* Mode 3 — phone: the panel sheds its card and reaches the page gutter. */
@media (max-width: 640px) {
  .game-root[data-game="fits-right-in"] {
    padding: 10px 10px 14px; margin-left: -8px; margin-right: -8px;
    border-left: 0; border-right: 0; border-radius: 0; box-shadow: none;
  }
  .fri-name-bar { font-size: 1.1rem; }
  .fri-ask { margin: 4px 0 8px; font-size: .84rem; }
  .fri-held { width: 94%; }
  .fri-n { font-size: .88rem; }
  .fri-s { margin-left: 6px; font-size: .68rem; }
  .fri-v { margin-left: 8px; padding: 3px 7px; font-size: .76rem; }
  .fri-fact { font-size: .82rem; }
}

/* Mode 2 — page-filling. The panel is game-layout.css's; the column sits in its middle. */
html.fills-window .game-root[data-game="fits-right-in"] .fri { height: 100%; justify-content: center; }
html.fills-window .game-root[data-game="fits-right-in"] .fri > * { flex: none; }