/* Board type Vocabulary (js/board-vocab.js): a 16:9 deck of flashcards for the class TV.
   Sizes inside the deck are board units (the deck is 1280 × 720 and is zoomed to fit the screen). --vc-tap is set by the
   deck's fit so its buttons are always at least 48 px on the screen. */
.wb-vocab{background:#fff;border-radius:28px;box-shadow:0 10px 30px rgba(16,24,40,.12);user-select:none;-webkit-user-select:none}
.vc-deck{position:absolute;inset:0;display:flex;flex-direction:column;padding:0 var(--vc-pad) var(--vc-pad);border-radius:28px;overflow:hidden;background:linear-gradient(180deg,#F3F8FF,#FFFFFF 40%)}
.vc-head{flex:none;height:var(--vc-head);display:flex;align-items:center;gap:16px;padding:0 6px;color:#17324D}
.vc-title{font-size:34px;font-weight:800;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-count{font-size:22px;font-weight:700;color:#6B7A90;white-space:nowrap}
.vc-hint{margin-left:auto;font-size:20px;font-weight:700;color:#2B6BE6;white-space:nowrap}
.vc-grid{flex:1;min-height:0;display:grid;grid-template-columns:repeat(var(--vc-cols),minmax(0,1fr));grid-template-rows:repeat(var(--vc-rows),minmax(0,1fr));gap:var(--vc-gap)}

/* a card */
.vc-card{position:relative;min-width:0;min-height:0;display:flex;align-items:center;justify-content:center;border-radius:22px;background:#fff;border:3px solid #D8E2EE;box-shadow:0 4px 0 #D8E2EE;cursor:pointer;color:#17324D;touch-action:none;transition:transform .15s ease,box-shadow .15s ease}
.vc-card:active{transform:translateY(2px);box-shadow:0 2px 0 #D8E2EE}
.vc-card.flip{background:#FFF9E6;border-color:#F2C94C;box-shadow:0 4px 0 #F2C94C}
.vc-card.hid{background:linear-gradient(160deg,#4C7DF0,#2B5BD0);border-color:#244FB8;box-shadow:0 4px 0 #1E43A0;color:#fff}
.vc-q{font-weight:900;line-height:1;opacity:.95}
.vc-face{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;max-width:100%;max-height:100%;padding:8px 12px;box-sizing:border-box;text-align:center}
.vc-p{display:flex;align-items:center;justify-content:center;line-height:1}
.vc-emo{display:block;line-height:1}
.vc-img{display:block;height:1em;width:auto;max-width:100%;object-fit:contain;pointer-events:none;-webkit-user-drag:none}
.vc-w{display:block;font-weight:800;line-height:1.1;white-space:nowrap;max-width:100%}
.vc-vi{display:block;font-weight:700;color:#7A5A00;line-height:1.15;max-width:100%}

/* the buttons on a card: big enough to tap from the screen (--vc-tap) */
.vc-b{position:absolute;z-index:2;width:var(--vc-tap,64px);height:var(--vc-tap,64px);display:grid;place-items:center;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.94);color:#1C7ED6;box-shadow:0 2px 8px rgba(16,24,40,.2);cursor:pointer}
.vc-b .wbi{width:46%;height:46%}
.vc-card .vc-say{right:6px;bottom:6px}
.vc-card .vc-bigb{right:6px;top:6px;color:#3D4650}
.vc-card .vc-del{right:6px;top:6px;color:#C92A2A}
.vc-hidtag{position:absolute;left:10px;top:8px;display:inline-flex;align-items:center;gap:4px;font-size:18px;font-weight:800;color:#5A6572;background:#EEF0F3;border-radius:999px;padding:2px 10px}

/* Arrange: drag to move, tap to hide or show */
.vc-deck.edit .vc-card{cursor:grab;border-style:dashed}
.vc-deck.edit .vc-card.off{opacity:.45}
.vc-card.vc-drag{z-index:5;cursor:grabbing;pointer-events:none;box-shadow:0 18px 40px rgba(16,24,40,.3);transition:none;opacity:.92}
.vc-card.vc-over{border-color:#2B6BE6;border-style:solid;box-shadow:0 0 0 6px rgba(43,107,230,.25)}
.vc-card.vc-add{flex-direction:column;gap:10px;padding:10px;cursor:default;border:3px dashed #9DB4D6;background:#F7FAFF;box-shadow:none}
.vc-addl{display:flex;flex-direction:column;gap:6px;width:100%;font-size:20px;font-weight:800;color:#3D4650}
.vc-in{font:inherit;font-size:26px;font-weight:700;min-height:var(--vc-tap,64px);width:100%;box-sizing:border-box;padding:0 12px;border:2px solid #C9D3E0;border-radius:14px;background:#fff;color:#17324D;user-select:text;-webkit-user-select:text}
.vc-addb{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:var(--vc-tap,64px);padding:0 22px;border:0;border-radius:14px;background:#2B6BE6;color:#fff;font:inherit;font-size:24px;font-weight:800;cursor:pointer}
.vc-addb .wbi{width:26px;height:26px}
.vc-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;font-size:30px;font-weight:700;color:#6B7A90}
.vc-empty p{margin:0}

/* a card made big */
.vc-bigwrap{position:absolute;inset:0;z-index:6;display:flex;align-items:center;justify-content:center;background:rgba(23,50,77,.55)}
.vc-big{position:relative;width:62%;height:76%;display:flex;align-items:center;justify-content:center;border-radius:36px;background:#fff;border:4px solid #D8E2EE;box-shadow:0 20px 60px rgba(0,0,0,.3);color:#17324D;cursor:pointer}
.vc-big.hid{background:linear-gradient(160deg,#4C7DF0,#2B5BD0);color:#fff;border-color:#244FB8}
.vc-nav{top:50%;transform:translateY(-50%);width:calc(var(--vc-tap,64px) * 1.4);height:calc(var(--vc-tap,64px) * 1.4);color:#17324D}
.vc-nav.prev{left:4%}.vc-nav.next{right:4%}
.vc-bigbar{position:absolute;left:0;right:0;bottom:3%;display:flex;align-items:center;justify-content:center;gap:24px}
.vc-bigbar .vc-b{position:static}
.vc-bign{font-size:26px;font-weight:800;color:#fff;background:rgba(0,0,0,.35);border-radius:999px;padding:4px 18px}

/* Words ▾: the sets */
.vc-menu{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;padding:16px 22px 22px;background:rgba(255,255,255,.98)}
.vc-mh{display:flex;align-items:center;justify-content:space-between;height:var(--vc-tap,64px);margin-bottom:10px;font-size:32px;color:#17324D}
.vc-mh .vc-b{position:static;box-shadow:none;background:#EEF0F3;color:#3D4650}
.vc-sets{flex:1;min-height:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:minmax(0,1fr);gap:14px}
.vc-set{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto;align-content:center;column-gap:14px;text-align:left;min-height:var(--vc-tap,64px);padding:8px 16px;border:3px solid #D8E2EE;border-radius:20px;background:#fff;color:#17324D;font:inherit;cursor:pointer}
.vc-set:hover{border-color:#2B6BE6}
.vc-set:disabled{opacity:.5;cursor:not-allowed}
.vc-set-e{grid-row:1/3;font-size:54px;line-height:1;align-self:center}
.vc-set b{font-size:28px;font-weight:800;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vc-set span:last-child{font-size:20px;font-weight:600;color:#6B7A90;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* the top bar's buttons */
.vc-tools .wb-tb{min-height:48px;min-width:48px}
.vc-tools .wb-tb:disabled{opacity:.45}
.vc-seg{display:inline-flex;background:#EEF0F3;border-radius:12px;padding:3px;gap:2px}
.vc-seg .wb-tb{border:0;background:transparent;color:#5A6572;min-height:48px;padding:0 12px}
.vc-seg .wb-tb[aria-pressed="true"]{background:#fff;color:#2B6BE6;box-shadow:0 1px 3px rgba(16,24,40,.14)}
@media (max-width:1100px){ .vc-tools .wb-tl{display:none} }
@media (prefers-reduced-motion:reduce){ .vc-card{transition:none} }