/* Tablić — "Learn to play" (tutorial.js). Cut from the same kafana as style.css: the coach's
   slip is an espresso plate with a brass edge and the woven band across its top, the spotlight
   is the lamp — everything else steps back into the dark — and the lit cards wear a brass ring.
   Linked after style.css; only .tut-* selectors live here. */

/* the dark: one SVG mask with a hole per lit target (drawn in tutorial.js) */
.tut-veil { position: fixed; inset: 0; z-index: 240; pointer-events: none;
    /* the veil's brown is MULTIPLIED onto the table: everything outside the lamp sinks into the
       same warm dark (reds stay red, the cloth stays wine) instead of greying over */
    mix-blend-mode: multiply;
    opacity: 0; transition: opacity .32s var(--ease-out); }
.tut-veil.on { opacity: 1; }
.tut-veil svg { display: block; }

/* the brass ring round each lit target, breathing slowly like a lamp flame */
.tut-rings { position: fixed; inset: 0; z-index: 245; pointer-events: none; }
.tut-ring { position: absolute; border-radius: 14px; border: 2px solid var(--saffron-hi);
    box-shadow: 0 0 0 3px rgba(242, 199, 102, 0.14), 0 6px 22px rgba(242, 199, 102, 0.32);
    animation: tut-breathe 2.2s ease-in-out infinite; }
.tut-ring.tight { border-radius: 9px; }
@keyframes tut-breathe {
    0%, 100% { box-shadow: 0 0 0 3px rgba(242, 199, 102, 0.12), 0 6px 18px rgba(242, 199, 102, 0.26); }
    50% { box-shadow: 0 0 0 5px rgba(242, 199, 102, 0.20), 0 8px 28px rgba(242, 199, 102, 0.42); }
}

/* the coach's slip */
.tut-slip { position: fixed; left: -9999px; top: 0; z-index: 260;
    width: max-content; max-width: min(430px, calc(100vw - 24px));
    padding: 20px 18px 12px; border-radius: 16px; overflow: visible;
    /* the woven band is the plate's own top layer, like every panel in style.css */
    background: var(--band) repeat-x 0 0 / auto 8px, linear-gradient(180deg, var(--esp-700), var(--esp-900));
    border: 1px solid rgba(242, 199, 102, 0.5); color: var(--cream);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.6);
    opacity: 0; visibility: hidden; transform: translateY(6px);
    transition: opacity .26s var(--ease-out), transform .26s var(--ease-out), visibility 0s linear .26s; }
.tut-slip.show { opacity: 1; visibility: visible; transform: none;
    transition: opacity .26s var(--ease-out), transform .26s var(--ease-out); }
/* an order waits on the player: the plate's edge is lit, a finger leads the line */
.tut-slip[data-mode="do"] { border-color: var(--saffron-hi);
    box-shadow: 0 0 0 1px rgba(242, 199, 102, 0.25), 0 2px 4px rgba(0, 0, 0, 0.45), 0 18px 44px rgba(0, 0, 0, 0.6); }
.tut-body { display: flex; align-items: flex-start; gap: 10px; }
.tut-icon { display: none; flex: 0 0 auto; width: 24px; height: 24px; margin-top: 1px; color: var(--saffron-hi); }
.tut-icon svg { width: 100%; height: 100%; display: block; }
.tut-slip[data-mode="do"] .tut-icon { display: block; }
.tut-text { font: 500 15px/1.48 "Work Sans", system-ui, sans-serif; letter-spacing: 0.005em;
    max-width: 50ch; text-wrap: pretty; }
.tut-slip[data-mode="do"] .tut-text { font-weight: 600; color: var(--saffron-hi); }
.tut-slip[data-mode="final"] .tut-text { font-family: "Playfair Display", Georgia, serif; font-size: 19px;
    font-weight: 700; line-height: 1.35; text-align: center; text-wrap: balance; }
/* a card named in a line: its rank and suit, in the suit's ink, on a small paper chip */
.tut-c { display: inline-block; padding: 0 5px; border-radius: 4px; white-space: nowrap;
    background: var(--cream); color: #1a1a1a; font-weight: 700; font-size: 0.94em; line-height: 1.35;
    font-variant-numeric: lining-nums; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.45); }
.tut-c.red { color: var(--kilim); }

.tut-extra:empty { display: none; }
.tut-values { display: flex; justify-content: center; gap: 16px; margin: 14px 0 2px; }
.tut-val { display: flex; flex-direction: column; align-items: center; gap: 5px; --card-w: 42px; }
.tut-val .card { box-shadow: 0 2px 3px rgba(0, 0, 0, 0.4), 0 6px 12px rgba(0, 0, 0, 0.35); }
.tut-val b { font-family: "Playfair Display", Georgia, serif; font-size: 17px; font-weight: 800; color: var(--saffron-hi);
    font-variant-numeric: lining-nums tabular-nums; white-space: nowrap; }

.tut-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 2px 8px; margin-top: 12px; }
.tut-count { margin-right: auto; white-space: nowrap; font-size: 12px; color: var(--cream-dim); letter-spacing: 0.04em;
    font-variant-numeric: tabular-nums; }
.tut-skip { min-height: 40px; padding: 0 10px; white-space: nowrap; border: none; background: none; border-radius: 999px;
    color: var(--cream-dim); font: 600 13px/1 "Work Sans", system-ui, sans-serif; cursor: pointer;
    text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(242, 199, 102, 0.4);
    touch-action: manipulation; transition: color .15s; }
.tut-skip:hover { color: var(--cream); }
.tut-next.primary-btn { margin-top: 0; width: auto; min-height: 42px; padding: 0 18px 0 20px;
    display: inline-flex; align-items: center; gap: 8px; font-size: 15px; }
.tut-next svg { width: 18px; height: 18px; }
/* a tighter lift than the start card's big pill: it sits on a small plate */
.tut-next.primary-btn { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -2px 0 rgba(0, 0, 0, 0.12), 0 3px 8px rgba(0, 0, 0, 0.4); }
.tut-slip[data-mode="do"] .tut-next, .tut-slip[data-mode="hidden"] .tut-next { display: none; }
/* the last slip: two real choices, side by side */
.tut-slip[data-mode="final"] { padding-top: 24px; max-width: min(400px, calc(100vw - 24px)); }
.tut-slip[data-mode="final"] .tut-count { display: none; }
.tut-slip[data-mode="final"] .tut-foot { display: grid; grid-template-columns: 1fr 1.3fr; gap: 10px; margin-top: 16px; }
.tut-slip[data-mode="final"] .tut-foot .primary-btn { white-space: nowrap; padding: 0 12px; justify-content: center; }
.tut-slip[data-mode="final"] .tut-skip.primary-btn.alt { margin: 0; width: auto; min-height: 42px; text-decoration: none;
    color: var(--cream); font-size: 14px; font-weight: 700; }
.tut-slip[data-mode="final"] .tut-next { order: 2; justify-content: center; }
.tut-slip[data-mode="final"] .tut-skip { order: 1; }

/* an off-script tap: the slip shrugs and a small kilim tag says what to do instead */
.tut-slip.nudge { animation: tut-nudge .42s var(--ease-out); }
@keyframes tut-nudge { 20% { transform: translateX(-6px); } 45% { transform: translateX(5px); } 70% { transform: translateX(-2px); } }
.tut-nag { position: absolute; left: 14px; bottom: calc(100% + 8px); z-index: 2; pointer-events: none;
    width: max-content; max-width: min(300px, calc(100vw - 40px)); padding: 7px 14px; border-radius: 999px;
    background: linear-gradient(180deg, var(--kilim-hi), var(--kilim-deep)); color: var(--cream);
    border: 1px solid rgba(242, 199, 102, 0.6); font: 600 13px/1.35 "Work Sans", system-ui, sans-serif;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden;
    transition: opacity .2s var(--ease-out), visibility 0s linear .2s; }
/* the slip sits right under the header: say it below the slip instead, never over the header */
.tut-nag.below { bottom: auto; top: calc(100% + 8px); }
.tut-nag.end { left: auto; right: 14px; }
.tut-nag.on { opacity: 1; visibility: visible; transition: opacity .2s var(--ease-out); }

/* the notch: a small brass-edged tip on the slip's side nearest the lit target */
.tut-notch { display: none; position: absolute; width: 14px; height: 14px; margin: -7px 0 0 -7px;
    background: var(--esp-800); border: 1px solid rgba(242, 199, 102, 0.6); pointer-events: none; }
.tut-notch.on { display: block; }
.tut-notch.top { top: 0; left: var(--at); transform: rotate(45deg); border-right: none; border-bottom: none; background: var(--esp-700); }
.tut-notch.bottom { top: 100%; left: var(--at); transform: rotate(45deg); border-left: none; border-top: none; background: var(--esp-900); }
.tut-notch.left { left: 0; top: var(--at); transform: rotate(45deg); border-right: none; border-top: none; }
.tut-notch.right { left: 100%; top: var(--at); transform: rotate(45deg); border-left: none; border-bottom: none; }
.tut-slip[data-mode="do"] .tut-notch { border-color: var(--saffron-hi); }

/* short landscape phones: the slip gives the table its height back */
@media (max-height: 520px) and (orientation: landscape) {
    .tut-slip { padding: 15px 14px 8px; max-width: min(400px, calc(100vw - 24px)); border-radius: 14px; }
    .tut-slip::before { height: 6px; }
    .tut-text { font-size: 13.5px; line-height: 1.42; }
    .tut-slip[data-mode="final"] .tut-text { font-size: 17px; }
    .tut-foot { margin-top: 6px; }
    .tut-skip { min-height: 36px; }
    .tut-next.primary-btn { min-height: 36px; font-size: 14px; padding: 0 14px 0 16px; }
    .tut-values { margin-top: 8px; gap: 14px; }
    .tut-val { --card-w: 32px; gap: 3px; }
    .tut-val b { font-size: 14px; }
    .tut-icon { width: 20px; height: 20px; }
}
@media (max-height: 340px) and (orientation: landscape) {
    .tut-slip { max-width: min(380px, calc(100vw - 20px)); padding: 13px 12px 6px; }
    .tut-text { font-size: 13px; line-height: 1.38; }
    .tut-val { --card-w: 28px; }
}
@media (pointer: coarse) {
    .tut-skip { min-height: 44px; }
    .tut-next.primary-btn { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
    .tut-ring, .tut-slip.nudge { animation: none; }
}

/* the start card: "Learn to play" stands beside Play, in the secondary pill — the same height as
   Play, so the card is no taller than before (index.html .play-row) */
.play-row { display: flex; gap: 10px; align-items: stretch; margin-top: 14px; }
.play-row .primary-btn { margin-top: 0; }
.play-row #play-btn { flex: 1.55 1 0; min-width: 0; }
.play-row #start-tutorial-btn { flex: 1 1 0; min-width: 0; width: auto; padding: 4px 12px; line-height: 1.15;
    text-wrap: balance; }
@media (max-height: 520px) and (orientation: landscape) {
    .play-row { margin-top: 8px; }
    .play-row #start-tutorial-btn { font-size: 13.5px; padding: 3px 8px; }
}
/* the 300px floor on a touch screen: the slip's buttons keep 40px (as the header's do here) so
   the slip still fits beside what it lights */
@media (pointer: coarse) and (max-height: 340px) and (orientation: landscape) {
    .tut-skip, .tut-next.primary-btn { min-height: 40px; }
}

/* short screens (under 420px tall): the slip is a narrow column, so it can stand beside the
   cards it talks about instead of on them */
@media (max-height: 420px) {
    .tut-slip { max-width: min(46vw, 360px); }
    .tut-text { font-size: 13px; line-height: 1.4; }
    .tut-slip[data-mode="final"] { max-width: min(420px, calc(100vw - 24px)); }
}