/* css/modes/rowschool.css — Vigeregelskolen (js/modes/rowschool.js). Everything is scoped to .rowschool-* / .rs-*. */

/* ---------------------------------------------------------------- the question / explanation / fail card */
.rowschool-card {
  position: absolute; z-index: 24; left: 50%; bottom: calc(var(--safe-b) + 18px); transform: translateX(-50%);
  width: min(580px, calc(100% - 24px - var(--safe-l) - var(--safe-r))); max-height: calc(100% - 120px); overflow: auto;
  padding: 14px 16px 16px; border-radius: 22px; color: #fff;
  background: rgba(13, 19, 33, .78); border: 1px solid var(--glass-border, rgba(255,255,255,.12));
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 18px 50px rgba(0,0,0,.4);
  opacity: 0;
}
.rowschool-card.in { animation: rsCardIn .45s var(--ease-pop, ease-out) both; }
.rowschool-card[hidden] { display: none; }
@keyframes rsCardIn { from { opacity: 0; transform: translate(-50%, 40px) scale(.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }

.rs-kicker, .rs-verdict { display: flex; align-items: center; gap: 6px; font-size: .7rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--primary, #ffb547); }
.rs-kicker .ico, .rs-verdict .ico { width: 17px; height: 17px; }
.rs-verdict { color: var(--good, #3ee08f); font-size: .8rem; }
.rs-dots { margin-left: auto; display: inline-flex; gap: 5px; }
.rs-dots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255,255,255,.18); }
.rs-dots i.cur { background: var(--primary, #ffb547); box-shadow: 0 0 0 3px rgba(255,181,71,.25); }
.rs-dots i.ok { background: var(--good, #3ee08f); }
.rs-dots i.meh { background: #8fb7ff; }

.rs-q {
  margin: 4px 0 2px; font-size: clamp(1.45rem, 5.6vw, 2rem); font-weight: 900; line-height: 1.05; letter-spacing: -.01em;
  background: linear-gradient(180deg, #fff6d8, #ffb547 70%, #ff8a3d); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 2px 0 rgba(90, 40, 20, .55));
}
.rs-sub { margin: 2px 0 12px; font-size: 1rem; font-weight: 700; line-height: 1.3; color: rgba(255,255,255,.9); }

.rs-choices { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.rs-choice {
  position: relative; min-height: 58px; padding: 8px 10px; border-radius: 16px; display: flex; align-items: center; justify-content: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 2px solid rgba(255,255,255,.16); color: #fff; font: inherit; font-size: 1.08rem; font-weight: 900;
  cursor: pointer; transition: transform .15s var(--ease-pop, ease-out), background .15s, border-color .15s; touch-action: manipulation;
}
.rs-choice:hover { background: rgba(255,255,255,.17); transform: translateY(-2px); }
.rs-choice:active { transform: scale(.96); }
.rs-choice:focus-visible { outline: 3px solid var(--blue, #49c6f2); outline-offset: 2px; }
.rs-choice span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rs-choice kbd, .rs-btns kbd {
  font: 800 .62rem ui-rounded, "Segoe UI", system-ui, sans-serif; padding: 2px 5px; border-radius: 5px; background: rgba(255,255,255,.14); color: rgba(255,255,255,.75); border: 1px solid rgba(255,255,255,.2);
}
.rs-choice kbd { position: absolute; top: 4px; right: 5px; }
.rs-dot { flex: none; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.rs-dot2 { position: relative; width: 26px; background: none; border: 0; box-shadow: none; }
.rs-dot2 b { position: absolute; top: 0; width: 18px; height: 18px; border-radius: 50%; background: var(--c); border: 2px solid #fff; box-shadow: 0 2px 6px rgba(0,0,0,.35); }
.rs-dot2 b + b { left: 9px; }
.rs-choice.right { background: rgba(62,224,143,.25); border-color: var(--good, #3ee08f); animation: rsRight .5s var(--ease-pop, ease-out); }
.rs-choice.wrong { background: rgba(255,77,94,.18); border-color: rgba(255,77,94,.7); opacity: .6; animation: rsShake .45s; cursor: default; }
@keyframes rsRight { 0% { transform: scale(1); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }
@keyframes rsShake { 0%, 100% { transform: translateX(0); } 20% { transform: translateX(-8px); } 40% { transform: translateX(7px); } 60% { transform: translateX(-5px); } 80% { transform: translateX(3px); } }

.rs-hint { margin: 10px 0 0; padding: 8px 12px; border-radius: 12px; background: rgba(255,210,94,.14); border: 1px solid rgba(255,210,94,.4); color: #ffe6a3; font-weight: 800; font-size: .92rem; line-height: 1.3; }
.rs-hint.pop { animation: rsPop .4s var(--ease-pop, ease-out); }
@keyframes rsPop { from { transform: scale(.9); opacity: 0; } to { transform: none; opacity: 1; } }
.rs-tap { margin: 8px 0 0; text-align: center; font-size: .8rem; font-weight: 700; color: var(--text-dim, rgba(236,241,255,.66)); }

.rs-rule { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; margin: 8px 0 6px; }
.rs-rnum { padding: 3px 10px; border-radius: 999px; background: linear-gradient(160deg, #8ff0b8, #18a957); color: #052a17; font-size: .72rem; font-weight: 900; letter-spacing: .04em; }
.rs-rule b { font-size: clamp(1.25rem, 4.8vw, 1.6rem); font-weight: 900; line-height: 1.1; }
.rs-reason { margin: 0 0 8px; font-size: 1.02rem; font-weight: 700; line-height: 1.35; }
.rs-why { display: flex; gap: 8px; align-items: flex-start; margin: 0 0 10px; color: #bfe9ff; font-size: .9rem; font-weight: 700; line-height: 1.3; }
.rs-why .ico { width: 18px; height: 18px; color: var(--blue, #49c6f2); margin-top: 1px; }
.rs-btns { display: flex; gap: 8px; margin-top: 12px; }
.rs-btns .btn { flex: 1; min-height: 52px; gap: 8px; }
.rs-btns .btn-primary { flex: 1.6; }
.rs-btns .btn-primary kbd { background: rgba(0,0,0,.12); color: rgba(42,18,6,.7); border-color: rgba(0,0,0,.15); }

.rs-fail { text-align: center; }
.rs-fail .rs-q { background: linear-gradient(180deg, #ffe0e3, #ff4d5e); -webkit-background-clip: text; background-clip: text; }
.rs-fail-ico { width: 54px; height: 54px; margin: 0 auto 2px; border-radius: 50%; display: grid; place-items: center; background: var(--bad, #ff4d5e); color: #fff; box-shadow: 0 0 0 6px rgba(255,77,94,.25); animation: rsBounce .6s var(--ease-pop, ease-out); }
.rs-fail-ico .ico { width: 30px; height: 30px; }
@keyframes rsBounce { 0% { transform: scale(.2) rotate(-30deg); } 70% { transform: scale(1.15) rotate(6deg); } 100% { transform: none; } }

/* ---------------------------------------------------------------- big title (scenario intro, "Klaret!") */
.rowschool-title {
  position: absolute; z-index: 23; left: 50%; top: 30%; transform: translate(-50%, -50%); pointer-events: none; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; max-width: calc(100% - 32px);
}
.rowschool-title[hidden] { display: none; }
.rowschool-title.in { animation: rsTitle .6s var(--ease-pop, ease-out) both; }
.rowschool-title small { padding: 4px 12px; border-radius: 999px; background: rgba(13,19,33,.7); font-size: .8rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--primary, #ffb547); }
.rowschool-title b {
  font-size: clamp(2rem, 9vw, 3.6rem); font-weight: 900; line-height: 1.05;
  background: linear-gradient(180deg, #fff6d8, #ffc65c 55%, #ff7a3d); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 4px 0 rgba(90, 40, 20, .6)) drop-shadow(0 10px 24px rgba(0,0,0,.35));
}
.rowschool-title b.rs-ok { background: linear-gradient(180deg, #e3fff0, #3ee08f); -webkit-background-clip: text; background-clip: text; filter: drop-shadow(0 4px 0 #0f6b3c) drop-shadow(0 10px 24px rgba(0,0,0,.35)); }
.rs-mini { display: flex; gap: 8px; }
.rs-mini i { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-weight: 900; font-size: 1.1rem; background: rgba(13,19,33,.6); color: rgba(255,255,255,.35); border: 2px solid rgba(255,255,255,.2); }
.rs-mini i.on { background: var(--star, #ffd25e); color: #5a3a06; border-color: #fff3c4; animation: rsBounce .5s var(--ease-pop, ease-out) both .2s; }
.rs-mini i.on + i.on { animation-delay: .4s; }
@keyframes rsTitle { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.5); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

/* ---------------------------------------------------------------- role badge while sailing */
.rowschool-role {
  position: absolute; z-index: 21; left: 50%; top: calc(var(--safe-t) + 78px); transform: translateX(-50%); pointer-events: none;
  display: flex; align-items: center; gap: 8px; padding: 7px 14px 7px 10px; border-radius: 999px; white-space: nowrap;
  font-weight: 900; font-size: .95rem; color: #fff; background: rgba(13,19,33,.72); border: 2px solid rgba(255,255,255,.2);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: 0 8px 22px rgba(0,0,0,.3);
}
.rowschool-role[hidden] { display: none; }
.rowschool-role .ico { width: 20px; height: 20px; }
.rowschool-role.pop { animation: rsRolePop .45s var(--ease-pop, ease-out); }
.rs-r-give, .rs-r-giveRoom, .rs-r-keepout, .rs-r-keepShip { border-color: rgba(255,77,94,.85); background: rgba(120,20,35,.72); }
.rs-r-give .ico, .rs-r-giveRoom .ico, .rs-r-keepout .ico, .rs-r-keepShip .ico { color: #ff8f9b; }
.rs-r-stand, .rs-r-room { border-color: rgba(62,224,143,.85); background: rgba(10,80,48,.72); }
.rs-r-stand .ico, .rs-r-room .ico { color: #7dffb5; }
.rs-r-both { border-color: rgba(73,198,242,.9); background: rgba(10,60,95,.72); }
.rs-r-avoid { border-color: rgba(255,181,71,.9); background: rgba(100,60,10,.72); }
.rs-r-free { border-color: rgba(255,214,94,.8); }
.rs-r-free .ico { color: var(--star, #ffd25e); }
@keyframes rsRolePop { 0% { transform: translateX(-50%) scale(.7); } 100% { transform: translateX(-50%) scale(1); } }

/* ---------------------------------------------------------------- red flash on a foul */
.rowschool-flash { position: absolute; inset: 0; z-index: 22; pointer-events: none; opacity: 0; background: radial-gradient(ellipse at center, rgba(255,77,94,0) 40%, rgba(255,77,94,.55) 100%); }
.rowschool-flash.on { animation: rsFlash .8s ease-out; }
@keyframes rsFlash { 0% { opacity: 1; } 100% { opacity: 0; } }

/* ---------------------------------------------------------------- phones */
@media (max-width: 520px) {
  .rowschool-card { bottom: calc(var(--safe-b) + 10px); padding: 12px 12px 14px; border-radius: 20px; }
  .rs-sub { font-size: .94rem; margin-bottom: 10px; }
  .rs-choice { min-height: 54px; font-size: 1rem; padding: 6px; gap: 6px; }
  .rs-reason { font-size: .95rem; }
  .rs-why { font-size: .84rem; }
  .rowschool-role { top: calc(var(--safe-t) + 120px); font-size: .86rem; }
}
/* landscape phones: the card sits on the right half, the situation on the left */
@media (orientation: landscape) and (max-height: 520px) {
  .rowschool-card { left: auto; right: calc(var(--safe-r) + 10px); bottom: calc(var(--safe-b) + 10px); transform: none; width: min(400px, 48vw); max-height: calc(100% - var(--safe-t) - var(--safe-b) - 72px); padding: 10px 12px 12px; }
  .rowschool-card.in { animation: rsCardInSide .4s var(--ease-pop, ease-out) both; }
  .rs-q { font-size: 1.35rem; }
  .rs-sub { font-size: .85rem; margin-bottom: 8px; }
  .rs-choice { min-height: 46px; font-size: .92rem; }
  .rs-reason { font-size: .86rem; }
  .rs-why { font-size: .78rem; }
  .rs-btns .btn { min-height: 46px; }
  .rs-tap { display: none; }
  .rowschool-title { top: 42%; }
  .rowschool-role { top: calc(var(--safe-t) + 62px); }
}
@keyframes rsCardInSide { from { opacity: 0; transform: translateX(40px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .rowschool-card.in, .rowschool-title.in, .rowschool-role.pop, .rs-choice.right, .rs-choice.wrong, .rowschool-flash.on { animation: none; opacity: 1; }
  .rowschool-flash.on { opacity: 0; }
}

/* auto-trim (Let/Normal): trimming is not what this school is about, so the sheet slider is hidden; Pro keeps it */
.rowschool-autotrim .kc-sheet { display: none; }