.tq-borrowed-grid{display:none;}
@media(max-width:640px){.tp-guide-head{flex-direction:column;align-items:flex-start;gap:12px;}.tp-guide-head-left{text-align:left;}.tp-guide-head-divider{display:none;}}
.tq-wrap{max-width:1200px;margin:40px auto 40px;padding:0 20px;font-family:var(--wp--preset--font-family--body-font,-apple-system,BlinkMacSystemFont,'Inter',sans-serif);color:#16181d;}
/* Which game you are playing is not another filter, so it does not look like
   one: it is a two-state switch on a grey track, the same control the spread
   page uses for Random / Choose. Six identical pills in a row gave no way to
   tell "narrow the deck" from "change the game". */
.tq-modes{
	display:inline-flex;gap:2px;align-items:center;
	padding:3px;border-radius:999px;background:#f4f5f7;
}
.tq-mode{
	font-size:15px;font-weight:600;line-height:1;padding:8px 16px;
	border-radius:999px;border:none;background:none;color:#8a8f98;
	cursor:pointer;font-family:inherit;white-space:nowrap;
	transition:background .15s,color .15s;
}
.tq-mode:hover{color:#16181d;}
.tq-mode.active{background:#fff;color:#4f46e5;box-shadow:0 1px 3px rgba(16,20,30,.14);}
/* --- the setup, in the same shape the spread page uses --------------------

   Sections carry an eyebrow label, what you are choosing sits on the left
   under it with a line of explanation, and the controls that change the game
   sit on the right, each under a label of its own. Before this everything -
   six deck filters, a checkbox and the game switch - stood in one flat row of
   pills, so nothing said which of them narrowed the deck and which changed
   what you were being asked. Same type, same colours, same pill controls as
   the spread; only the arrangement is new. */
.tq-step{position:relative;padding:0 0 26px 0;margin-bottom:26px;border-bottom:1px solid #e6e7eb;}
.tq-step-lbl{display:block;font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#4f46e5;margin-bottom:14px;}
.tq-setup{display:flex;flex-wrap:wrap;align-items:flex-start;gap:40px;}
.tq-setup-main{flex:1 1 480px;min-width:0;}
.tq-setup-side{flex:0 0 auto;margin-left:auto;display:flex;flex-wrap:wrap;align-items:flex-end;gap:20px;}
.tq-field{display:flex;flex-direction:column;}
.tq-control-lbl{display:block;font-size:15px;font-weight:600;letter-spacing:.03em;text-transform:uppercase;color:#8a8f98;margin-bottom:8px;}
.tq-deck-desc{font-size:15px;color:#8a8f98;line-height:1.55;max-width:560px;margin:14px 0 0;}
.tq-difficulty{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:0;}
.tq-diff{font-size:15px;font-weight:600;padding:8px 16px;border-radius:999px;border:1px solid #e6e7eb;background:#fff;color:#8a8f98;cursor:pointer;font-family:inherit;transition:background .15s, border-color .15s, color .15s;}
.tq-diff:hover{border-color:#4f46e5;color:#16181d;}
.tq-diff.active{background:#4f46e5;border-color:#4f46e5;color:#fff;}
@media(max-width:900px){
	.tq-setup{gap:24px;}
	.tq-setup-main{flex:1 1 100%;}
	.tq-setup-side{margin-left:0;gap:18px;}
}
@media(max-width:520px){
	.tq-setup-side{width:100%;}
	.tq-setup-side .tq-field{width:100%;}
	.tq-modes{display:flex;}
	.tq-mode{flex:1;}
	.tq-check{justify-content:center;}
}
.tq-round{padding:24px 24px 18px;}
.tq-progress-txt{font-size:19px;font-weight:700;color:#16181d;margin-bottom:14px;text-align:center;}
.tq-progress-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px;}
.tq-lives{display:flex;gap:6px;}
.tq-life{display:flex;color:#4f46e5;transition:opacity .2s, transform .2s;}
.tq-life-lost{opacity:.3;transform:scale(.8);}
.tq-progress-bar{height:8px;background:#f4f5f7;border-radius:999px;overflow:hidden;}
.tq-progress-fill{height:100%;background:#4f46e5;border-radius:999px;transition:width .3s ease;width:0%;}
.tq-timer{display:flex;align-items:center;gap:4px;font-size:15px;font-weight:700;color:#8a8f98;font-variant-numeric:tabular-nums;}
.tq-timer.tq-timer-warn{color:#dc2626;}
.tq-endcard{display:none;position:absolute;inset:0;background:#fff;border-radius:16px;flex-direction:column;align-items:center;justify-content:center;padding:32px;text-align:center;z-index:5;}
.tq-endcard.tq-show{display:flex;}
.tq-end-icon{font-size:40px;margin-bottom:14px;}
.tq-end-title{font-size:26px;font-weight:700;margin-bottom:10px;}
.tq-end-msg{font-size:15px;color:#8a8f98;line-height:1.6;max-width:480px;margin:0 auto 20px;}
.tq-end-score{font-size:18px;font-weight:700;color:#4f46e5;margin-bottom:24px;}
.tq-stats{display:flex;flex-direction:column;gap:10px;padding:6px 24px 24px;}
.tq-stat{display:flex;align-items:center;justify-content:space-between;background:#f4f5f7;border-radius:999px;padding:12px 18px;}
.tq-stat-lbl{display:flex;align-items:center;gap:8px;font-size:15px;font-weight:600;color:#16181d;text-transform:none;letter-spacing:0;}
.tq-stat-num{font-size:16px;font-weight:700;color:#4f46e5;}
.tq-row{display:flex;gap:20px;align-items:stretch;}
.tq-box{position:relative;flex:1;min-width:0;display:flex;gap:28px;align-items:flex-start;background:#fff;border:1px solid #e6e7eb;border-radius:16px;padding:28px;}
.tq-sidepanel{flex:0 0 260px;display:flex;flex-direction:column;justify-content:center;background:#fff;border:1px solid #e6e7eb;border-radius:16px;overflow:hidden;box-shadow:0 8px 24px -14px rgba(16,20,30,.15);}
.tq-art-col{flex:0 0 248px;border-radius:18px;padding:0;transition:background .15s;}
.tq-art-col.tq-splash-correct{animation:tq-splash-green .6s ease;}
.tq-art-col.tq-splash-wrong{animation:tq-splash-red .6s ease;}
@keyframes tq-splash-green{0%{background:rgba(22,163,74,0);}25%{background:rgba(22,163,74,.25);}100%{background:rgba(22,163,74,0);}}
@keyframes tq-splash-red{0%{background:rgba(220,38,38,0);}25%{background:rgba(220,38,38,.25);}100%{background:rgba(220,38,38,0);}}
.tq-shake{animation:tq-shake-move .4s ease;}
@keyframes tq-shake-move{0%,100%{transform:translateX(0) scale(1);}20%{transform:translateX(-8px) scale(1);}40%{transform:translateX(8px) scale(1);}60%{transform:translateX(-6px) scale(1);}80%{transform:translateX(6px) scale(1);}}
.tq-hints{font-size:15px;font-weight:500;color:#a8adb5;text-align:center;margin-top:12px;}
/* --- the cloth -----------------------------------------------------------

   The same ground the spread is laid on: a flat violet-grey with the dotted
   grid over it, at the same 15px pitch and the same opacity. The card is
   dealt onto it with a real shadow, so it reads as an object on a table
   rather than a picture in a box. The colours are literals here, as
   everywhere else in these sheets, so the dark file can be generated from
   them. */
.tq-cloth{
	position:relative;padding:22px;border-radius:18px;
	background-color:#edeef3;
	background-image:radial-gradient(rgba(79,70,229,.13) 1.5px, transparent 1.5px);
	background-size:15px 15px;
	border:1px solid #e0e2ea;
	box-shadow:inset 0 1px 3px rgba(16,20,30,.06);
}
.tq-art{aspect-ratio:1144/1919;background:#f4f5f7;border-radius:12px;overflow:hidden;display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(.96);box-shadow:0 14px 30px -16px rgba(16,20,30,.55);transition:box-shadow .15s, opacity .2s, transform .15s;}
.tq-art.tq-art-in{animation:tq-fade-in .3s ease forwards;}
@keyframes tq-fade-in{to{opacity:1;transform:scale(1);}}
.tq-art img{width:100%;height:100%;object-fit:cover;display:block;}
.tq-art .tq-noimg{color:#8a8f98;font-size:15px;}
.tq-right{flex:1;min-width:0;}
/* Yes or No: the question above the card, and the reasoning below the
   answers once the call has been made. */
.tq-ask{display:block;margin-bottom:14px;padding:12px 16px;border-radius:12px;background:#f4f3ff;border:1px solid #e4e1fb;}
.tq-ask[hidden]{display:none;}
.tq-ask-lbl{display:block;font-size:11px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8a8f98;margin-bottom:4px;}
.tq-ask-q{display:block;font-size:17px;font-weight:600;line-height:1.4;color:#16181d;}
.tq-why{margin-top:14px;padding:14px 16px;border-radius:12px;background:#fafafb;border:1px solid #e6e7eb;font-size:14.5px;line-height:1.6;color:#4a4f59;}
.tq-why[hidden]{display:none;}
/* In Yes or No the reasoning appears between the answers and the button, and
   the button was left sitting flush against it - the answers' own bottom
   margin is above the reasoning, not below it. */
.tq-why:not([hidden]) + .tq-next{margin-top:18px;}
.tq-name{font-size:20px;font-weight:700;margin-bottom:14px;min-height:28px;color:#4f46e5;}
.tq-options{display:flex;flex-direction:column;gap:10px;margin-bottom:20px;}
.tq-option{text-align:left;font-size:15px;padding:12px 16px;border-radius:10px;border:1px solid #e6e7eb;background:#fff;cursor:pointer;font-family:inherit;transition:border-color .15s;}
.tq-option:hover:not(:disabled){border-color:#4f46e5;}
.tq-option:disabled{cursor:default;}
.tq-option.tq-correct{border-color:#16a34a;background:#f0fdf4;color:#16a34a;font-weight:600;}
.tq-option.tq-wrong{border-color:#dc2626;background:#fef2f2;color:#dc2626;}
.tq-next{font-size:15px;font-weight:600;color:#fff;background:#4f46e5;border:none;padding:11px 20px;border-radius:8px;cursor:pointer;font-family:inherit;}
.tq-next:hover{background:#4338ca;}
.tq-art:hover{transform:translateY(-3px);box-shadow:0 20px 36px -16px rgba(16,20,30,.6);}
.tq-art:focus,.tq-art:focus-visible{outline:2px solid #4f46e5;outline-offset:2px;border-radius:5px;}
/* Phones: the filter row is centred, exactly like the one over the card
   grid on the front page, and the card sits in the middle above the
   question. The answers stay left aligned - they are sentences to read. */
@media(max-width:640px){
	.tq-row{flex-direction:column;}
	/* Stacked on a phone, the two halves of the box have to take the full
	   width. The box aligns its items to the start, which on a wide screen
	   keeps the card and the question level at the top - but once the
	   direction turns to a column that same rule shrink-wraps each half to
	   its own content and pins it left. The question panel and the answers
	   were as wide as their longest line and sat off to one side, and the
	   column jumped every time an answer or the reasoning changed its widest
	   line. That is the shifting in Yes or No. */
	.tq-box{flex-direction:column;gap:20px;padding:20px 16px;align-items:stretch;}
	.tq-art-col{flex:0 0 auto;max-width:230px;margin:0 auto;}
	.tq-cloth{padding:16px;}
	.tq-sidepanel{flex:0 0 auto;width:100%;}
	.tq-mode{flex:1 1 auto;}
	/* On a phone the whole setup reads down the middle: the section label,
	   the filters, the line under them and the two controls with their own
	   labels. Left-aligned labels over centred rows of pills looked like two
	   different columns fighting for the same space. */
	.tq-difficulty{justify-content:center;}
	.tq-step-lbl{text-align:center;}
	.tq-control-lbl{text-align:center;}
	.tq-setup-main{text-align:center;}
	.tq-setup{justify-content:center;}
	.tq-setup-side{align-items:center;justify-content:center;}
	.tq-field{align-items:center;width:100%;}
	.tq-check{justify-content:center;}
	.tq-deck-desc{text-align:center;margin-left:auto;margin-right:auto;}
	.tq-step{padding-bottom:20px;margin-bottom:20px;}
	.tq-ask{text-align:center;}
	.tq-round{padding:20px 16px 16px;}
	.tq-stats{padding:6px 16px 20px;}
	.tq-name{text-align:center;}
	/* The button is centred by the column it sits in, not by auto margins of
	   its own: the script sets its display inline when it shows it, and auto
	   margins do nothing on an inline box - so the rule that was meant to
	   centre it never could, and the button sat off to one side until
	   something else redrew the column. The answers keep their own left
	   alignment; they are sentences to read. */
	.tq-right{text-align:center;}
	.tq-option{text-align:left;}
	.tq-why{text-align:left;}
	.tq-endcard{padding:24px 18px;}
}

/* "Include reversed cards" sits with the difficulty filters */
.tq-check{display:inline-flex;align-items:center;gap:9px;font-size:15px;font-weight:600;color:var(--ta-muted,#8a8f98);cursor:pointer;line-height:1;padding:8px 16px;border-radius:var(--ta-radius-pill,999px);border:1px solid var(--ta-line,#e6e7eb);background:var(--ta-surface,#fff);transition:border-color .15s,color .15s;}
.tq-check:hover{border-color:var(--ta-violet,#4f46e5);}
.tq-check:has(input:checked){color:var(--ta-ink,#16181d);border-color:var(--ta-violet,#4f46e5);}
.tq-check input{width:17px;height:17px;margin:0;accent-color:var(--ta-violet,#4f46e5);cursor:pointer;}
.tq-art.tq-reversed img{transform:rotate(180deg);}
.tq-orient{display:inline-block;margin-top:8px;font-size:15px;font-weight:600;line-height:1;padding:6px 12px;border-radius:var(--ta-radius-pill,999px);background:var(--ta-violet-soft,#f4f3ff);color:var(--ta-violet,#4f46e5);}


/* --- the block's own width, against the theme's layout rule ---------------

   Block themes print a layout rule of their own - .wp-container-… > * - that
   clamps every child of the post content to the theme's content size (620px
   in Twenty Twenty-Four). It carries the same specificity as a plain class
   and lands in <head> after our stylesheet, so it wins on order alone and
   the block is squeezed into a column meant for prose. Naming the content
   container puts our width back in front on specificity, without
   !important, which would also override the narrower widths this block sets
   for itself on small screens.

   Last in the file on purpose: @media adds no specificity, so a later plain
   rule wins on paper as well as on screen. */
.entry-content .tq-wrap,
.wp-block-post-content .tq-wrap,
.wp-site-blocks .tq-wrap{max-width:1200px;}