/* The school (Schoolroom.razor): the game's school on its tile wall. Every length is a share of
   the screen's height (--h), laid by SchoolLayout as the game's TableLayout lays it. The page
   is laid left to right in every language, as the game's is; only the words read their own way. */

.school {
    --plaque: #f6e9c8;
    --paper-ink: #16234f;
    --on-navy: #f6ecd4;
    --gold-bright: #ffd75e;
    --on-table: #f0e5c9;
    background-position: center;
    background-size: cover;
    touch-action: none;
}

.school .veil {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 40, 0.08);
    pointer-events: none;
}

.school img { display: block; pointer-events: none; }

.school button {
    font: inherit;
    color: inherit;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

/* The ring lies across the middle, as tall as the table and as wide as the screen lets it be. */
.school .ring {
    top: calc(50 * var(--h));
    width: var(--ring-w);
    min-width: 0;
}

/* ---- a card on the table ---- */

.school .card { --wide: var(--card-w); }

.school .slot {
    position: absolute;
    width: var(--card-w);
    transform: rotate(var(--r, 0deg));
    transition: left 0.3s cubic-bezier(0.22, 1, 0.36, 1), top 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s ease, opacity 0.2s;
}

.school .slot.held { transition: none; cursor: grabbing; }
.school .slot.pale { opacity: 0.4; }

.school .slot.glow .card {
    box-shadow: 0 0 0 calc(0.55 * var(--h)) var(--gold), 0 0 calc(2.4 * var(--h)) calc(0.6 * var(--h)) rgba(255, 215, 94, 0.75);
}

/* Lifted off the table while its name is said, over the cards that lie across it. */
.school .slot.air { transform: rotate(var(--r, 0deg)) translateY(calc(-1.6 * var(--h))) scale(1.1); }
.school .slot.air .card { box-shadow: 0 0 0 calc(0.55 * var(--h)) var(--gold-bright), 0 calc(1.6 * var(--h)) calc(3 * var(--h)) rgba(0, 0, 0, 0.45); }

/* Played from a chair: it comes out of that chair into its place in the diamond. */
.school .come.coming { animation: school-come 0.32s cubic-bezier(0.22, 1, 0.36, 1) var(--come-d) backwards; }

@keyframes school-come {
    from { transform: translate(var(--come-x), var(--come-y)) scale(0.85); opacity: 0; }
    12% { opacity: 1; }
    to { transform: none; }
}

/* A small jump with the card a little larger at its top (CardSlot.Hop). */
.school .hop.hopping { animation: school-hop var(--hop-t) cubic-bezier(0.3, 0.7, 0.4, 1) var(--hop-d) both; }

@keyframes school-hop {
    0% { transform: none; }
    40% { transform: translateY(calc(-2.2 * var(--hop-h) * var(--h))) scale(calc(1 + 0.05 * var(--hop-h))); }
    100% { transform: none; }
}

/* A wrong card shakes: three times each way and still. */
.school .shaker.shaking { animation: school-shake 0.35s linear; }

@keyframes school-shake {
    0%, 100% { transform: none; }
    14%, 43%, 71% { transform: rotate(4.6deg); }
    29%, 57%, 86% { transform: rotate(-4.6deg); }
}

/* Turned over where it lies: narrowing to nothing on its back and opening on its face. */
.school .turner { position: relative; }
.school .turner.turning { animation: school-turn var(--flip-t) ease-in-out var(--flip-d) both; }

.school .turned-back {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border-radius: 6% / 4.3%;
    animation: school-back var(--flip-t) steps(1, end) var(--flip-d) both;
}

@keyframes school-turn {
    0% { transform: none; }
    50% { transform: scaleX(0); }
    100% { transform: none; }
}

@keyframes school-back {
    0% { opacity: 1; }
    50%, 100% { opacity: 0; }
}

/* ---- the piles and places a card is taken to, and the hokm's mark ---- */

.school .disc { position: absolute; }

.school .disc.suit {
    border-radius: 50%;
    background: radial-gradient(closest-side, var(--cream) 0 70%, var(--gold) 70% 73%, var(--cream) 73% 90%, var(--cobalt) 90%);
    box-shadow: 0 calc(0.4 * var(--h)) calc(0.8 * var(--h)) rgba(0, 0, 0, 0.3);
}

.school .disc.suit img {
    position: absolute;
    left: 50%;
    top: 50%;
    height: 50%;
    transform: translate(-50%, -50%);
}

.school .disc.spot {
    border-radius: calc(0.06 * var(--card-w));
    background: rgba(246, 230, 192, 0.35);
    border: 2px solid rgba(31, 63, 143, 0.5);
    box-sizing: border-box;
}

.school .disc.suit.red::after,
.school .disc.suit.green::after {
    content: "";
    position: absolute;
    inset: -22%;
    border-radius: 50%;
    border: max(3px, calc(0.9 * var(--h))) solid var(--tint);
    background: color-mix(in srgb, var(--tint) 30%, transparent);
    box-sizing: border-box;
}

.school .disc.red { --tint: var(--red); }
.school .disc.green { --tint: #2e8b3a; }

.school .disc.lit::before,
.school .hokm-mark.lit::before,
.school .tricks-row.lit::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: 132%;
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    background: rgba(255, 215, 94, 0.35);
    border: max(2px, calc(0.6 * var(--h))) solid var(--gold-bright);
}

.school .hokm-mark { position: absolute; }
.school .hokm-mark .disc { inset: 0; }

.school .hokm-mark span {
    position: absolute;
    left: -100%;
    right: -100%;
    bottom: 104%;
    text-align: center;
    font-weight: 700;
    font-size: calc(3 * var(--h));
    color: var(--on-table);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

/* Lesson 8: the taken tricks as rows of backs, and the rounds as seven places a side. */
.school .tricks-row,
.school .rounds-row { position: absolute; }

.school .tricks-row i {
    position: absolute;
    bottom: 0;
    border-radius: calc(0.3 * var(--h));
    background: #1f4fa3;
    border: 2px solid var(--red);
    box-sizing: border-box;
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3), inset 0 0 0 calc(1 * var(--h)) #1f4fa3, inset 0 0 0 calc(1.1 * var(--h)) rgba(226, 182, 74, 0.5);
}

.school .tricks-row.theirs i { border-color: var(--black); }

.school .tricks-row b,
.school .rounds-row b {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    text-align: center;
    font-size: calc(5 * var(--h));
    line-height: 1;
    color: var(--red);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.4);
}

.school .tricks-row.theirs b,
.school .rounds-row.theirs b { color: var(--on-table); }

.school .rounds-row i {
    position: absolute;
    bottom: 0;
    border-radius: 50%;
    box-sizing: border-box;
    border: 1.5px solid var(--red);
    background: color-mix(in srgb, var(--red) 15%, transparent);
}

.school .rounds-row i.won { background: var(--red); }
.school .rounds-row.theirs i { border-color: var(--on-table); background: color-mix(in srgb, var(--on-table) 15%, transparent); }
.school .rounds-row.theirs i.won { background: var(--on-table); }

/* ---- the four kings ---- */

.school .king { position: absolute; }

.school .king .shaker {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.school .king .shaker.shaking { animation: school-nudge 0.45s linear; }

@keyframes school-nudge {
    0%, 100% { transform: none; }
    15% { transform: translateX(5%); }
    35% { transform: translateX(-4%); }
    55% { transform: translateX(3%); }
    75% { transform: translateX(-1.5%); }
}

.school .king .portrait {
    position: relative;
    height: 80%;
    aspect-ratio: 276 / 362;
    flex: none;
}

.school .king .face {
    position: absolute;
    left: 16%;
    top: 25%;
    width: 68%;
    height: 67%;
    border-radius: 50%;
    background: var(--cream) no-repeat;
    background-size: cover;
    background-position: 50% 20%;
}

.school .king .frame {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.school .king .house-mark {
    position: absolute;
    left: 50%;
    top: 11%;
    height: 9%;
    transform: translate(-50%, -50%);
}

.school .king .crown {
    position: absolute;
    left: 50%;
    top: 0;
    width: 70%;
    transform: translate(-50%, -62%);
    filter: drop-shadow(0 calc(0.3 * var(--h)) calc(0.4 * var(--h)) rgba(0, 0, 0, 0.5));
}

/* The chair whose turn it is, or whose name is being said, in a gold light. */
.school .king.turn .portrait {
    filter: drop-shadow(0 0 calc(0.6 * var(--h)) var(--gold-bright)) drop-shadow(0 0 calc(1.2 * var(--h)) var(--gold-bright)) drop-shadow(0 0 calc(2.4 * var(--h)) rgba(255, 215, 94, 0.9));
}

.school .king .plaque {
    position: relative;
    height: 26%;
    aspect-ratio: 319 / 120;
    margin-top: -6%;
    flex: none;
}

.school .king .plaque img { width: 100%; height: 100%; }

.school .king .plaque span {
    position: absolute;
    left: 12%;
    right: 12%;
    top: 50%;
    transform: translateY(-50%);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    font-weight: 600;
    font-size: 1em;
    line-height: 1;
}

.school .king.place-0 .plaque span { font-size: calc(2.2 * var(--h)); }
.school .king.place-2 .plaque span { font-size: calc(1.6 * var(--h)); }
.school .king.place-1 .plaque span,
.school .king.place-3 .plaque span { font-size: calc(2.9 * var(--h)); }

/* ---- what Fereydun says ---- */

.school .bubble,
.school-round .bubble {
    position: absolute;
    box-sizing: border-box;
    padding: calc(2.2 * var(--h)) calc(2.4 * var(--h)) calc(1.6 * var(--h));
    background: var(--plaque);
    border: max(2px, calc(0.36 * var(--h))) solid var(--cobalt);
    border-radius: calc(1.5 * var(--h));
    box-shadow: 0 calc(0.4 * var(--h)) calc(1 * var(--h)) rgba(0, 0, 0, 0.35);
    color: var(--ink);
    z-index: 950;
}

.school .bubble.aside { border-color: var(--red); }

.school .bubble .tail {
    position: absolute;
    left: calc(-2.4 * var(--h));
    top: var(--tail-y);
    width: 0;
    height: 0;
    border-top: calc(1.6 * var(--h)) solid transparent;
    border-bottom: calc(1.6 * var(--h)) solid transparent;
    border-right: calc(2.6 * var(--h)) solid var(--plaque);
    transform: translateY(-50%);
}

.school .bubble[dir="rtl"] .tail { left: calc(-2.4 * var(--h)); }

.bubble .speaker {
    display: block;
    font-size: calc(2.4 * var(--h));
    letter-spacing: 0.04em;
    color: var(--red);
    line-height: 1.2;
}

.bubble p,
.school .measure {
    margin: calc(0.4 * var(--h)) 0 0;
    font-size: calc(3 * var(--h));
    line-height: 1.32;
}

.bubble p mark {
    background: rgba(255, 215, 94, 0.55);
    color: inherit;
    border-radius: calc(0.75 * var(--h));
    box-shadow: 0 0 0 calc(0.3 * var(--h)) rgba(255, 215, 94, 0.55);
}

.bubble small {
    display: block;
    margin-top: calc(0.4 * var(--h));
    text-align: end;
    font-size: calc(2.1 * var(--h));
    color: var(--ink-soft);
}

.school .measure {
    position: absolute;
    left: -9999px;
    top: 0;
    visibility: hidden;
    margin: 0;
}

/* The round key on the bubble's corner away from the speaker's name: pause, go on, again. */
.bubble .voice-key {
    position: absolute;
    right: calc(1.6 * var(--h));
    top: calc(-2.3 * var(--h));
    width: calc(6.9 * var(--h));
    height: calc(6.9 * var(--h));
}

.bubble[dir="rtl"] .voice-key { right: auto; left: calc(1.6 * var(--h)); }
.bubble .voice-key svg { width: 100%; height: 100%; display: block; }
.bubble .voice-key .ground { fill: var(--navy); }
.bubble .voice-key .head { fill: var(--on-navy); }
.bubble .voice-key .ring { fill: none; stroke: var(--on-navy); stroke-width: 6; }
.bubble .voice-key:hover { filter: brightness(1.2); }
.bubble .voice-key:active { opacity: 0.6; }

/* ---- the lesson's name, its discs, and the buttons ---- */

.school .lesson-name {
    position: absolute;
    left: calc(29.5 * var(--h));
    top: calc(3 * var(--h));
    font-weight: 700;
    font-size: calc(3.4 * var(--h));
    line-height: 1.2;
    color: var(--on-table);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.55);
    white-space: nowrap;
    overflow: hidden;
}

.school .progress {
    position: absolute;
    left: calc(29.5 * var(--h));
    top: calc(8.1 * var(--h));
    display: flex;
    gap: calc(1 * var(--h));
}

.school .progress i {
    width: calc(2.2 * var(--h));
    height: calc(2.2 * var(--h));
    border-radius: 50%;
    box-sizing: border-box;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--on-table);
}

.school .progress i.done { background: var(--gold); }
.school .progress i.now { border-width: 2.5px; }

/* The kit's enamel (Kit.Button): ivory, or navy for the main one. */
.school-kit {
    --bh: calc(7.8 * var(--h));
    position: relative;
    isolation: isolate;
    box-sizing: border-box;
    height: var(--bh);
    min-width: calc(20 * var(--h));
    padding: 0 calc(5 * var(--h));
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 800;
    font-size: calc(3 * var(--h));
    line-height: 1;
    color: var(--paper-ink, #16234f);
    white-space: nowrap;
}

.school-kit::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;
    border-style: solid;
    border-color: transparent;
    border-width: 0;
    border-image: url("../art/kit/flat/button-plain.png") 0 115 fill / 0 calc(var(--bh) * 0.5) stretch;
}

.school-kit::after {
    content: "";
    position: absolute;
    left: 50%;
    top: 0;
    width: calc(var(--bh) * 72 / 230);
    height: 100%;
    z-index: -1;
    transform: translateX(-50%);
    background: url("../art/kit/flat/button-plain.png") center / auto 100% no-repeat;
}

.school-kit.main { color: var(--on-navy, #f6ecd4); }
.school-kit.main::before { border-image: url("../art/kit/flat/button-main.png") 0 115 fill / 0 calc(var(--bh) * 0.518) stretch; }
.school-kit.main::after { width: calc(var(--bh) * 72 / 222); background-image: url("../art/kit/flat/button-main.png"); }
.school-kit:hover { filter: brightness(1.12); }
.school-kit:active { padding-top: max(4px, calc(var(--bh) * 0.07)); }
.school-kit:active::after { visibility: hidden; }
.school-kit:active::before { border-image-source: url("../art/kit/flat/button-plain-down.png"); transform: translateY(max(2px, calc(var(--bh) * 0.035))); filter: brightness(0.9); }
.school-kit.main:active::before { border-image-source: url("../art/kit/flat/button-main-down.png"); }
.school-kit.small { --bh: calc(7.2 * var(--h)); min-width: calc(17 * var(--h)); padding: 0 calc(3.5 * var(--h)); }

.school-kit.back {
    position: absolute;
    left: calc(3 * var(--h));
    top: calc(3 * var(--h));
    width: calc(24 * var(--h));
    padding: 0 calc(var(--bh) * 0.25) 0 calc(var(--bh) * 0.9);
    z-index: 960;
}

.school-kit.back .arrow {
    position: absolute;
    left: calc(var(--bh) * 0.3);
    top: 50%;
    width: calc(var(--bh) * 0.5);
    height: calc(var(--bh) * 0.5);
    transform: translateY(-50%);
    fill: var(--paper-ink, #16234f);
    stroke: var(--paper-ink, #16234f);
    stroke-width: 9;
}

.school .again {
    position: absolute;
    left: calc(3 * var(--h));
    top: calc(13 * var(--h));
    display: flex;
    gap: calc(2.5 * var(--h));
    z-index: 960;
}

.school .words-button {
    position: absolute;
    right: calc(3 * var(--h));
    bottom: calc(3 * var(--h));
    z-index: 960;
}

.school .yes-no {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: calc(6 * var(--h));
    z-index: 940;
}

.school .yes-no .school-kit { min-width: calc(20 * var(--h)); }

/* The lesson's name across the table as it begins, fading as it goes. */
.school .banner {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(70%, calc(110 * var(--h)));
    height: calc(20 * var(--h));
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(1.4 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: url("../art/kit/panel.png") 160 fill / calc(5 * var(--h)) stretch;
    color: var(--ink-soft);
    text-align: center;
    pointer-events: none;
    z-index: 970;
}

.school .banner.first { height: calc(26 * var(--h)); }
.school .banner small { font-size: calc(2.8 * var(--h)); }
.school .banner strong { font-size: calc(5.2 * var(--h)); color: var(--cobalt); }

/* The words card: every word the school uses, one line each, over a dimmed table. */
.school .words-card {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(80%, calc(130 * var(--h)));
    transform: translate(-50%, -50%);
    box-sizing: border-box;
    padding: calc(4 * var(--h)) calc(6 * var(--h)) calc(4 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: url("../art/kit/panel.png") 160 fill / calc(5 * var(--h)) stretch;
    color: var(--ink);
    z-index: 990;
}

.school.words-open::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(13, 10, 5, 0.55);
    z-index: 980;
}

.school .words-card h2 {
    margin: 0 0 calc(2 * var(--h));
    text-align: center;
    font-size: calc(3.9 * var(--h));
    color: var(--cobalt);
}

.school .words-card dl {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: calc(1.2 * var(--h)) calc(3 * var(--h));
    margin: 0;
}

.school .words-card dt { font-weight: 700; color: var(--red); font-size: calc(3 * var(--h)); }
.school .words-card dd { margin: 0; font-size: calc(2.6 * var(--h)); line-height: 1.25; }

/* ---- the ninth lesson, at the real table ---- */

.school-round,
.first-ask {
    --plaque: #f6e9c8;
    --paper-ink: #16234f;
    --on-navy: #f6ecd4;
    --gold-bright: #ffd75e;
}

.school-round button,
.first-ask button {
    font: inherit;
    font-weight: 800;
    color: var(--paper-ink, #16234f);
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.school-round .school-kit,
.first-ask .school-kit { padding: 0 calc(5 * var(--h)); color: #16234f; }
.school-round .school-kit.main,
.first-ask .school-kit.main { color: #f6ecd4; }
.school-round .school-kit.back { padding: 0 calc(var(--bh) * 0.25) 0 calc(var(--bh) * 0.9); font-size: calc(3 * var(--h)); }
.school-round .bubble { font-family: var(--face); }

.school-round .school-kit.back { position: fixed; left: calc(24 * var(--h)); top: calc(3 * var(--h)); z-index: 4000; }

.school-round .hold {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.2);
    z-index: 5000;
}

.school-round .bubble.middle {
    left: 50%;
    top: calc(20 * var(--h));
    width: min(calc(80 * var(--h)), 50vw);
    transform: translateX(-50%);
}

.school-round .bubble .seal {
    display: block;
    width: calc(18 * var(--h));
    margin: calc(1.5 * var(--h)) auto 0;
    filter: drop-shadow(0 calc(0.5 * var(--h)) calc(0.8 * var(--h)) rgba(0, 0, 0, 0.35));
}

.school-round .ways {
    position: fixed;
    left: 50%;
    top: calc(52 * var(--h));
    transform: translateX(-50%);
    display: flex;
    gap: calc(3 * var(--h));
    z-index: 4000;
}

.school-round .ways .school-kit { min-width: calc(30 * var(--h)); height: calc(8 * var(--h)); --bh: calc(8 * var(--h)); }

/* Fereydun's star over the card he would play, breathing (the table's hand, Table.razor). */
.hand .held .star {
    position: absolute;
    left: 50%;
    top: calc(-8.4 * var(--h));
    width: calc(7.6 * var(--h));
    height: calc(7.6 * var(--h));
    transform: translateX(-50%);
    pointer-events: none;
    animation: school-breathe 2.1s ease-in-out infinite;
    overflow: visible;
}

.hand .held .star circle { fill: rgba(226, 182, 74, 0.35); }
.hand .held .star polygon { fill: var(--gold); stroke: var(--ink); stroke-width: 0.8; }

@keyframes school-breathe {
    0%, 100% { transform: translateX(-50%) scale(0.88); }
    50% { transform: translateX(-50%) scale(1.06); }
}

/* ---- the ways in: the sign-in's line under the kings' table, and the first evening's question ---- */

.door .rule .to-school {
    font: inherit;
    padding: 0.25em 1em;
    border: 2px solid var(--gold);
    border-radius: 2em;
    background: rgba(20, 32, 79, 0.85);
    color: var(--cream);
    cursor: pointer;
}

.door .rule .to-school b { color: var(--gold); }
.door .rule .to-school span { opacity: 0.85; font-size: 0.9em; }
.door .rule .to-school:hover { filter: brightness(1.15); }

.first-ask {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: grid;
    place-items: center;
    background: rgba(13, 10, 5, 0.55);
}

.first-ask .ask {
    box-sizing: border-box;
    width: min(92vw, calc(110 * var(--h)));
    padding: calc(5 * var(--h)) calc(6 * var(--h));
    border-style: solid;
    border-width: 0;
    border-image: url("../art/kit/panel.png") 160 fill / calc(5 * var(--h)) stretch;
    text-align: center;
    color: var(--ink);
}

.first-ask h2 { margin: 0 0 calc(4 * var(--h)); font-size: calc(4.4 * var(--h)); color: var(--cobalt); }
.first-ask .ask > div { display: flex; justify-content: center; gap: calc(3 * var(--h)); flex-wrap: wrap; }
.first-ask button { font: inherit; border: 0; background: none; cursor: pointer; }