/* ===== Game board (desktop-first digital tabletop) =====
   Shares tokens/typography/buttons with base.css + lobby.css. Optional artwork is injected as CSS variables
   (--art-bg, --art-board-opp, --art-board-me, --art-tray, --art-banner, --art-win, --art-lose); every layer has a
   pure-CSS fallback, so missing files never leave gaps. Sizes adapt to BOTH viewport width and height. */

.gamewrap {
  /* adaptive card sizes: table cards, small (Student/Tutor/Event) cards, hand cards */
  --cw: clamp(60px, min(5.4vw, 9.4vh), 104px);
  --cs: clamp(46px, min(3.9vw, 7vh), 70px);
  --hw: clamp(76px, min(6.4vw, 13.5vh), 122px);
  --ratio: 1.385;
  --mat-line: rgba(38, 48, 77, .14);
  height: 100vh; height: 100dvh; display: flex; flex-direction: column; overflow: hidden; position: relative;
  font-family: "Nunito", var(--font);
  background-image: var(--art-bg, none), radial-gradient(70% 50% at 15% 0, #cfe6ff 0, transparent 70%), radial-gradient(60% 50% at 100% 100%, #d7f6ea 0, transparent 70%), linear-gradient(#f4f9ff, #fff6e6);
  background-size: cover, auto, auto, auto; background-position: center;
}
.gamewrap button { font-family: inherit; }

/* ---------- A. header ---------- */
.ghead { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 6px 14px; min-height: 48px; background: rgba(255, 253, 247, .92); border-bottom: 3px solid var(--yellow); position: relative; z-index: 30; }
.ghead .hl, .ghead .hr { display: flex; align-items: center; gap: 8px; } .ghead .hr { justify-content: flex-end; }
.ghead .btn.sm { min-height: 38px; padding: 4px 12px; font-size: .9rem; box-shadow: 0 3px 0 var(--line); }
.mstat { background: #fff; border: 2px solid var(--line); border-radius: 99px; padding: 3px 12px; font-weight: 800; font-size: .85rem; white-space: nowrap; color: #3b4770; }
.mstat.turnno { background: var(--blue-l); border-color: #b9ceff; color: #1f3a8a; }
.hc { display: flex; align-items: center; gap: 8px; }
.phase { background: var(--purple-l); color: #4a2fb0; border: 3px solid #d7c9ff; border-radius: 99px; padding: 4px 16px; font-weight: 900; font-size: .9rem; letter-spacing: .04em; transition: background-color .3s, border-color .3s; }
.phase.mine { background: var(--mint-l); color: #0c6f59; border-color: #8fe3cd; }
.activep { background: #fff; border: 3px solid var(--line); border-radius: 99px; padding: 4px 14px; font-weight: 900; font-size: .9rem; } .activep.mine { background: var(--yellow-l); border-color: var(--yellow); color: #5a3f00; }
.logbtn { position: relative; } .unread { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; border-radius: 99px; background: var(--coral); color: #fff; font-size: .7rem; font-weight: 900; display: grid; place-items: center; padding: 0 4px; }
.banner.away { margin: 4px 12px; text-align: center; padding: 4px 12px; }

/* ---------- layout ---------- */
.stage { flex: 1 1 0; min-height: 0; display: flex; }
.board { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; padding: 6px 12px; position: relative; }
.mid { position: relative; flex: none; height: 44px; display: grid; place-items: center; z-index: 5; }
.field { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; border-radius: 26px; padding: 6px 12px 8px; border: 3px solid rgba(255, 255, 255, .95); box-shadow: 0 6px 18px rgba(38, 48, 77, .12); position: relative; transition: box-shadow .3s, border-color .3s; }
.field.opp { background: linear-gradient(180deg, rgba(222, 235, 255, .8), rgba(240, 246, 255, .7)); }
.field.me { background: linear-gradient(180deg, rgba(218, 247, 238, .78), rgba(240, 252, 247, .72)); }
.field.active { border-color: var(--yellow); box-shadow: 0 0 0 3px rgba(255, 197, 51, .45), 0 6px 18px rgba(38, 48, 77, .14); }

/* info bar */
.pbar { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; min-height: 42px; }
.who { display: flex; align-items: center; gap: 8px; min-width: 0; }
.av { font-size: 1.5rem; width: 38px; height: 38px; display: grid; place-items: center; background: #fff; border-radius: 50%; box-shadow: var(--shadow-s); flex: none; }
.nm { display: grid; line-height: 1.1; min-width: 0; } .nm strong { font-size: 1rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 14ch; } .nm small { color: #4a557f; font-weight: 800; font-size: .72rem; }
.emote { background: var(--yellow); border-radius: 99px; padding: 2px 12px; font-weight: 900; animation: pop .2s; white-space: nowrap; }
.lpbox { display: grid; gap: 3px; min-width: 190px; flex: 0 1 260px; }
.lpbox.bump .lpnum b { animation: bump .55s; display: inline-block; }
.lpnum { display: flex; align-items: baseline; gap: 6px; position: relative; line-height: 1; } .lpnum b { font-size: 1.75rem; font-weight: 900; color: #8a5d00; font-family: var(--font-display, inherit); } .lpnum i { font-style: normal; color: #4a557f; font-weight: 800; }
.lpfloat { position: absolute; left: 92px; top: -4px; font-weight: 900; font-size: 1.4rem; pointer-events: none; animation: floatup 1.5s ease-out forwards; text-shadow: 0 2px 0 #fff, 0 0 8px #fff; } .lpfloat.up { color: #0c8f6c; } .lpfloat.down { color: #c93a2b; }
.lpbar { height: 14px; border-radius: 99px; background: #fff; border: 3px solid #fff; box-shadow: inset 0 0 0 2px var(--line); overflow: hidden; }
.lpbar > i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #35d1a8, #ffc533 60%, #ff8a5b); transition: width .6s cubic-bezier(.3, 1.2, .5, 1); }
.badges { display: flex; gap: 6px; flex-wrap: wrap; margin-left: auto; }
.badge { display: inline-flex; align-items: center; gap: 5px; background: #fff; border: 2px solid var(--line); border-radius: 99px; padding: 2px 10px 2px 8px; min-height: 30px; font-weight: 800; color: var(--ink); font-size: .85rem; }
.badge b { font-size: 1rem; } .badge small { color: #4a557f; font-size: .7rem; font-weight: 800; text-transform: uppercase; letter-spacing: .03em; }
.btnb { cursor: pointer; transition: transform .15s, border-color .15s; } .btnb:hover { border-color: var(--blue); transform: translateY(-2px); }
.books { display: flex; align-items: center; gap: 2px; } .bk { font-size: 1.3rem; display: inline-block; transition: transform .25s, opacity .25s; } .bk.rest { transform: rotate(80deg) scale(.85); opacity: .5; } .bk.popin { animation: bookdrop .55s cubic-bezier(.3, 1.5, .5, 1); }
.bshelf { margin-left: 4px; font-weight: 800; font-size: .8rem; background: #fff; border-radius: 99px; padding: 0 8px; border: 2px solid var(--line); }
@keyframes bookdrop { from { transform: translateY(-26px) scale(.5); opacity: 0; } to { transform: none; opacity: 1; } }

/* zones: Student/Tutor | battlefield | Event */
.zones { flex: 1; min-height: 0; display: flex; gap: 10px; align-items: stretch; }
.pair { display: flex; gap: 6px; flex: none; padding: 4px 6px; border-radius: 16px; background: rgba(255, 255, 255, .5); }
.pcol { display: flex; flex-direction: column; align-items: center; gap: 2px; flex: none; }
.zlabel { font-size: .68rem; font-weight: 900; text-transform: uppercase; letter-spacing: .05em; color: #3b4770; white-space: nowrap; }
.evcol { padding: 4px 6px; border-radius: 16px; background: rgba(255, 255, 255, .5); }
.table { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; padding: 6px 10px; border-radius: 20px; overflow: visible;
  min-height: calc(var(--cw) * var(--ratio) + 26px); position: relative; border: 3px dashed var(--mat-line); }
.mat-opp { background-image: var(--art-board-opp, none), repeating-linear-gradient(45deg, rgba(91, 140, 255, .06) 0 12px, transparent 12px 24px); background-size: cover, auto; background-color: rgba(255, 255, 255, .35); }
.mat-me { background-image: var(--art-board-me, none), repeating-linear-gradient(45deg, rgba(47, 201, 161, .07) 0 12px, transparent 12px 24px); background-size: cover, auto; background-color: rgba(255, 255, 255, .42); }
.empty { display: flex; align-items: center; gap: 8px; margin: 0 auto; padding: 6px 16px; border-radius: 99px; background: rgba(255, 255, 255, .72); color: #3b4770; font-weight: 800; font-size: .95rem; text-align: center; }
.eico { font-size: 1.2rem; }
.empty-slot { width: var(--cs); height: calc(var(--cs) * var(--ratio)); border: 3px dashed var(--mat-line); border-radius: 10px; display: grid; place-items: center; color: #4a557f; font-weight: 900; }

/* ---------- center status bar ---------- */
.statusbar { display: flex; align-items: center; gap: 12px; max-width: min(92%, 760px); padding: 6px 22px; border-radius: 99px; background: #fff; border: 3px solid var(--line); box-shadow: var(--shadow-s); transition: background-color .4s, border-color .4s, box-shadow .4s; }
.statusbar strong { font-family: var(--font-display, inherit); font-size: 1.15rem; letter-spacing: .04em; white-space: nowrap; } .statusbar span { font-weight: 800; color: #3b4770; font-size: .9rem; }
.statusbar.mine { background: linear-gradient(90deg, #fff3c4, #d9f7ee); border-color: var(--yellow); box-shadow: 0 0 0 4px rgba(255, 197, 51, .35), var(--shadow-s); } .statusbar.mine strong { color: #7a4f00; }
.statusbar.opp { background: #eaf0ff; border-color: #b9ceff; } .statusbar.opp strong { color: #1f3a8a; }
.statusbar.wait { background: var(--purple-l); border-color: #d7c9ff; } .statusbar.done { background: var(--mint-l); border-color: #8fe3cd; }
.callouts { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; z-index: 8; }
.callout { grid-area: 1 / 1; background: var(--ink); color: #fff; border-radius: 99px; padding: 5px 18px; font-weight: 900; font-size: .95rem; box-shadow: var(--shadow); animation: spin-in .25s ease; max-width: 90%; text-align: center; }

/* ---------- cards ---------- */
.slot { --w: var(--cw); position: relative; width: var(--w); height: calc(var(--w) * var(--ratio)); flex: none; transition: width .3s; }
.slot.small { --w: var(--cs); }
.slot.rested { width: calc(var(--w) * var(--ratio)); }
.gcard { position: absolute; left: 50%; top: 50%; width: var(--w); transform: translate(-50%, -50%); transition: transform .28s cubic-bezier(.3, 1.4, .5, 1), box-shadow .2s, filter .2s; border: 0; padding: 0; background: none; border-radius: 6%; cursor: pointer; }
.slot.rested .gcard { transform: translate(-50%, -50%) rotate(90deg); filter: saturate(.72); }
.gcard img { display: block; width: 100%; aspect-ratio: 750 / 1039; object-fit: contain; border-radius: 6%; box-shadow: var(--shadow-s); background: #e8e2d4; }
.gcard:hover { z-index: 5; } .slot:not(.rested) .gcard:hover { transform: translate(-50%, calc(-50% - 4px)) scale(1.04); }
.gcard.selected { outline: 5px solid var(--purple); outline-offset: 2px; z-index: 6; box-shadow: 0 0 0 8px rgba(139, 108, 240, .25); }
.slot:not(.rested) .gcard.selected { transform: translate(-50%, calc(-50% - 8px)); }
.gcard.glow { animation: glow 1.8s ease-in-out infinite; border-radius: 8%; }
.tag-act { position: absolute; top: -8px; left: -8px; width: 22px; height: 22px; border-radius: 50%; background: var(--yellow); color: #5a3f00; display: grid; place-items: center; font-size: .75rem; font-weight: 900; box-shadow: var(--shadow-s); z-index: 3; }
.slot.dim .gcard { filter: saturate(.55) brightness(.94); } .slot.dim .gcard.selected, .slot.dim .gcard:hover { filter: none; }
.gcard.shake { animation: shake .5s; }
.gcard.popin { animation: cardland .55s cubic-bezier(.3, 1.4, .5, 1); }
.gcard.lift { transform: translate(-50%, calc(-50% - 10px)); }
.gcard.drawin { animation: drawin .6s cubic-bezier(.2, .9, .3, 1); }
@keyframes cardland { from { transform: translate(-50%, calc(-50% + 70px)) scale(1.25); opacity: 0; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
@keyframes drawin { from { transform: translate(-90px, -150px) scale(.45) rotate(-10deg); opacity: 0; } to { transform: translate(-50%, -50%); opacity: 1; } }
.cback { display: grid; place-items: center; width: 100%; aspect-ratio: 750 / 1039; border-radius: 6%; background: repeating-linear-gradient(45deg, #5b8cff, #5b8cff 10px, #7a5cf0 10px, #7a5cf0 20px); border: 3px solid #fff; box-shadow: var(--shadow-s); }
.cback i { font-style: normal; font-size: calc(var(--w) * .45); }
.cnt { position: absolute; bottom: 4px; right: 4px; background: var(--ink); color: #fff; font-weight: 900; border-radius: 99px; min-width: 24px; height: 24px; display: grid; place-items: center; font-size: .8rem; padding: 0 5px; }
.pend, .under { position: absolute; top: 2px; right: 2px; background: var(--yellow); border-radius: 50%; width: 22px; height: 22px; display: grid; place-items: center; font-size: .8rem; } .under { background: var(--purple-l); }
.chips2 { position: absolute; left: 0; right: 0; bottom: -4px; display: flex; justify-content: center; gap: 3px; z-index: 3; pointer-events: none; }
.chips2 b { font-size: .75rem; padding: 0 7px; border-radius: 9px; background: #fff; border: 2px solid var(--ink); }
.chips2 .up { background: var(--mint-l); border-color: #0f7d64; } .chips2 .down { background: var(--coral-l); border-color: #c93a2b; }
.slot.rested .chips2 { bottom: auto; top: -4px; }

/* floating preview for board cards */
.hoverprev { position: fixed; z-index: 60; top: 50%; transform: translateY(-50%); width: min(260px, 20vw); background: #fff; border: 5px solid var(--purple); border-radius: 22px; box-shadow: 0 16px 44px rgba(38, 48, 77, .4); padding: 8px; pointer-events: none; animation: pop .12s; }
.hoverprev.right { right: 14px; } .hoverprev.left { left: 14px; }
.hoverprev img { width: 100%; display: block; border-radius: 6%; } .hp-t { display: grid; gap: 4px; padding: 6px 4px 2px; font-size: .85rem; } .hp-t p { margin: 0; line-height: 1.3; }
.hp-s { display: flex; gap: 8px; flex-wrap: wrap; font-weight: 900; }

/* ---------- D. hand tray ---------- */
.tray { flex: none; position: relative; display: grid; grid-template-columns: clamp(190px, 17vw, 270px) minmax(0, 1fr) auto; align-items: end; gap: 10px; padding: 6px 14px 10px; z-index: 20;
  border-top: 4px solid var(--yellow); border-radius: 28px 28px 0 0; box-shadow: 0 -8px 20px rgba(38, 48, 77, .1);
  background-image: var(--art-tray, none), repeating-linear-gradient(90deg, rgba(160, 120, 60, .05) 0 2px, transparent 2px 9px), linear-gradient(#fff3d6, #ffe9bd);
  background-size: cover, auto, auto; }
.trayin { min-width: 0; display: grid; gap: 4px; }
.traytop { display: grid; gap: 4px; }
.trayhead { display: flex; align-items: center; gap: 8px; } .trayhead strong { font-family: var(--font-display, inherit); letter-spacing: .05em; color: #5a3f00; }
.count { background: #fff; border: 2px solid #f1d58a; border-radius: 99px; padding: 1px 10px; font-weight: 800; font-size: .8rem; color: #5a3f00; }
.actstrip { display: flex; align-items: center; gap: 8px; min-height: 46px; padding: 3px 10px; border-radius: 16px; background: rgba(255, 255, 255, .72); border: 3px solid transparent; flex-wrap: nowrap; overflow: hidden; }
.actstrip.has { background: #fff; border-color: var(--purple); }
.actstrip .idle { color: #5a3f00; font-weight: 800; }
.astat { background: var(--blue-l); color: #1f3a8a; border-radius: 99px; padding: 2px 10px; font-weight: 900; font-size: .85rem; white-space: nowrap; }
.aname { white-space: nowrap; max-width: 20ch; overflow: hidden; text-overflow: ellipsis; }
.ahint { color: #8a3b00; font-weight: 800; font-size: .82rem; line-height: 1.15; flex: 1; min-width: 0; max-height: 2.4em; overflow: hidden; }
.abtns { display: flex; gap: 6px; margin-left: auto; flex: none; }
.actstrip .btn.sm { min-height: 36px; padding: 2px 12px; font-size: .88rem; box-shadow: 0 3px 0 var(--blue-d); } .actstrip .btn.sm.mint { box-shadow: 0 3px 0 #0c6f59; } .actstrip .btn.sm.yellow { box-shadow: 0 3px 0 var(--yellow-d); } .actstrip .btn.sm.purple { box-shadow: 0 3px 0 var(--purple-d); } .actstrip .btn.sm.coral { box-shadow: 0 3px 0 #b03323; } .actstrip .btn.sm.ghost { box-shadow: 0 3px 0 var(--line); }

/* the hand: cards overlap only when they must, and the hovered/selected card pops above its neighbours */
.hand { container-type: inline-size; display: flex; align-items: flex-end; min-height: calc(var(--hw) * var(--ratio) + 8px); padding: 14px 12px 2px; --ov: min(max(0px, calc((var(--n) * var(--hw) - 100cqw + 28px) / max(1, var(--n) - 1))), calc(var(--hw) * .6)); justify-content: center; }
.hcard { flex: none; position: relative; transition: transform .22s cubic-bezier(.3, 1.4, .5, 1), margin .2s; transform-origin: 50% 100%; z-index: 1; }
.hcard + .hcard { margin-left: calc(var(--ov) * -1); }
.hcard .slot { --w: var(--hw); }
.hcard:hover, .hcard:focus-within { transform: translateY(-30px) scale(1.34); z-index: 40; }
.hcard.picked { transform: translateY(-20px) scale(1.12); z-index: 30; }
.hcard.picked:hover { transform: translateY(-30px) scale(1.34); }
.hcard .gcard:hover { transform: translate(-50%, -50%); }
.hand .empty { align-self: center; }

/* end turn */
.endcol { display: grid; gap: 4px; justify-items: center; width: clamp(140px, 11vw, 190px); }
.endbtn { width: 100%; min-height: 68px; border: 0; border-radius: 22px; background: linear-gradient(#27d3bd, #14b8a6); color: #fff; font-weight: 900; font-size: 1.15rem; letter-spacing: .05em; display: flex; align-items: center; justify-content: center; gap: 8px; cursor: pointer;
  box-shadow: 0 6px 0 #0c8a7c, 0 10px 18px rgba(20, 184, 166, .35); text-shadow: 0 1px 0 rgba(0, 0, 0, .2); transition: transform .1s, box-shadow .1s, filter .15s; }
.endbtn .ico { font-size: 1.5rem; } .endbtn:hover:not(:disabled) { filter: brightness(1.07); transform: translateY(-2px); } .endbtn:active:not(:disabled) { transform: translateY(5px); box-shadow: 0 1px 0 #0c8a7c; }
.endbtn:disabled { background: #b8c6cc; box-shadow: 0 6px 0 #8e9ea5; cursor: not-allowed; text-shadow: none; color: #fff; }
.endbtn.glowbtn { background: linear-gradient(#ffd45c, #ffb400); color: #4a3500; box-shadow: 0 6px 0 #c98f00, 0 0 0 4px rgba(255, 197, 51, .5); animation: glow 1.5s infinite; text-shadow: none; }
.endbtn.loading { filter: saturate(.8); }
.endnote { font-weight: 800; color: #5a3f00; font-size: .78rem; text-align: center; line-height: 1.15; min-height: 1.6em; } .endnote.ready { color: #0c6f59; }
.spin { width: 22px; height: 22px; border-radius: 50%; border: 4px solid rgba(255, 255, 255, .4); border-top-color: #fff; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* Book guide: lives in its own dock so it never covers cards or controls */
.guide { align-self: end; display: grid; justify-items: start; gap: 4px; min-width: 0; }
.bookbtn { width: 68px; height: 78px; border: 0; background: none; cursor: pointer; padding: 0; border-radius: 16px; transition: transform .2s; display: grid; place-items: center; } .bookbtn:hover { transform: translateY(-3px) rotate(-3deg); }
.bookbtn img { height: 76px; width: auto; display: block; } .bookbtn svg { display: block; }
.gbubble { position: relative; width: 100%; background: #fff; border: 3px solid var(--blue); border-radius: 18px; padding: 8px 10px; box-shadow: var(--shadow-s); font-weight: 800; font-size: .88rem; line-height: 1.3; max-height: 150px; overflow: auto; }
.gbubble p { margin: 0 0 6px; } .gctl { display: flex; gap: 6px; flex-wrap: wrap; } .gbubble .btn.sm { min-height: 34px; padding: 2px 10px; font-size: .82rem; box-shadow: 0 3px 0 var(--line); } .gbubble .btn.sm.yellow { box-shadow: 0 3px 0 var(--yellow-d); }
.guide.talking { align-self: stretch; grid-template-rows: 1fr auto; align-content: end; }
.tutorial .gbubble { border-color: var(--purple); }

/* ---------- E. log ---------- */
.sidebar { width: clamp(250px, 19vw, 320px); flex: none; background: rgba(255, 253, 247, .92); border-left: 3px solid var(--line); padding: 8px 10px; display: flex; flex-direction: column; min-height: 0; }
.sbhead { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .sbhead h3 { margin: 0; font-size: 1.05rem; } .sbhead .btn { min-height: 32px; width: 32px; }
.logs { list-style: none; margin: 0; padding: 0; overflow-y: auto; min-height: 0; flex: 1; display: grid; gap: 5px; align-content: start; }
.lg { display: grid; grid-template-columns: 26px 1fr auto; gap: 6px; align-items: start; padding: 5px 8px; border-radius: 14px; font-size: .84rem; line-height: 1.25; background: #fff; border: 2px solid var(--line); }
.lgi { font-size: 1.05rem; line-height: 1.1; } .lgt { color: #5b6590; font-size: .68rem; font-weight: 800; padding-top: 2px; }
.lg.s-me { background: #e6faf3; border-color: #9fe5d0; } .lg.s-opp { background: #eaf0ff; border-color: #bccfff; }
.lg.k-turn { background: var(--blue-l); border-color: var(--blue); font-weight: 900; } .lg.k-score { background: var(--yellow-l); border-color: var(--yellow); font-weight: 800; }
.lg.k-effect { background: var(--purple-l); border-color: #d7c9ff; } .lg.k-system { background: #f4f1e8; border-color: #e0d9c6; color: #4a557f; font-style: italic; }
.lg.k-error { background: var(--coral-l); border-color: var(--coral); color: #8a1f12; font-weight: 800; } .lg.k-chat { background: #fff0f7; border-color: #f5b6d6; }
@media (max-width: 1280px) { .sidebar { position: absolute; right: 0; top: 48px; bottom: 0; width: min(320px, 38vw); z-index: 55; box-shadow: -10px 0 24px rgba(38, 48, 77, .2); } }

/* ---------- banner, popups, mulligan ---------- */
.turnbanner { position: fixed; left: 50%; top: 28%; transform: translate(-50%, -50%); z-index: 70; pointer-events: none; padding: 14px 44px; border-radius: 99px; font-family: var(--font-display, inherit); font-weight: 900; font-size: clamp(1.4rem, 3vw, 2.2rem); letter-spacing: .05em; color: #1f3a8a;
  background-image: var(--art-banner, none), linear-gradient(90deg, #d9ecff, #fff); background-size: cover; border: 4px solid #fff; box-shadow: 0 12px 34px rgba(38, 48, 77, .3); animation: bannerin 1.5s ease both; }
.turnbanner.mine { color: #7a4f00; background-image: var(--art-banner, none), linear-gradient(90deg, #ffe37a, #d9f7ee); }
@keyframes bannerin { 0% { opacity: 0; transform: translate(-50%, -30%) scale(.8); } 18% { opacity: 1; transform: translate(-50%, -50%) scale(1.04); } 30% { transform: translate(-50%, -50%) scale(1); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -62%); } }
.emotebar { position: absolute; top: 56px; right: 14px; z-index: 56; background: #fff; padding: 10px; border-radius: 18px; box-shadow: var(--shadow); display: flex; gap: 6px; flex-wrap: wrap; max-width: 330px; }

.mullrow, .mullhand { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin: 12px 0; }
.mullhand .slot { --w: clamp(80px, 9vw, 130px); }
.overlay.mull { background: radial-gradient(60% 60% at 50% 30%, rgba(207, 230, 255, .75), rgba(38, 48, 77, .6)); }
.mullcard { width: min(1040px, 96vw); max-height: 94vh; overflow: auto; text-align: center; padding: 20px clamp(16px, 3vw, 40px) 22px; border-radius: 36px; background: linear-gradient(#fffdf7, #fff3d8); border: 5px solid #fff; box-shadow: 0 24px 70px rgba(0, 0, 0, .4); animation: pop .25s; font-family: var(--font-display, inherit); }
.mullcard h2 { font-size: clamp(1.8rem, 3.6vw, 2.8rem); margin: 0; color: #1f3a8a; text-shadow: 0 3px 0 #fff, 0 5px 0 rgba(63, 124, 255, .22); letter-spacing: .03em; }
.mull-eyebrow { display: inline-block; margin: 0 0 6px; padding: 3px 14px; border-radius: 99px; background: var(--purple-l); color: #4a2fb0; font-weight: 900; font-size: .85rem; }
.mull-sub { margin: 2px 0 6px; font-size: 1.25rem; font-weight: 900; color: #3b4770; }
.mullcard p, .mullcard small { font-family: "Nunito", var(--font); }
.mcard { position: relative; width: clamp(84px, min(10vw, 19vh), 152px); padding: 0; border: 5px solid transparent; border-radius: 14px; background: none; cursor: pointer; transition: transform .2s cubic-bezier(.3, 1.4, .5, 1), border-color .15s, box-shadow .15s; animation: deal .5s cubic-bezier(.3, 1.2, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
.mcard img { display: block; width: 100%; border-radius: 8px; box-shadow: var(--shadow-s); aspect-ratio: 750 / 1039; object-fit: contain; background: #e8e2d4; }
.mcard:hover:not(:disabled) { transform: translateY(-8px) scale(1.05); } .mcard:focus-visible { outline: 4px solid var(--purple); outline-offset: 3px; }
.mcard.on { border-color: var(--coral); box-shadow: 0 0 0 5px rgba(255, 116, 102, .3); transform: translateY(-8px); } .mcard.on img { filter: saturate(.6) brightness(.9); }
.mcard:disabled { cursor: default; }
.repl { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); background: var(--coral); color: #fff; border-radius: 99px; padding: 3px 12px; font-weight: 900; font-size: .85rem; white-space: nowrap; box-shadow: var(--shadow-s); font-family: "Nunito", var(--font); }
@keyframes deal { from { opacity: 0; transform: translateY(-60px) rotate(-8deg) scale(.7); } to { opacity: 1; transform: none; } }
.mullcard.nodeal .mcard { animation: none; }
.mull-help { font-size: 1.15rem; font-weight: 900; margin: 6px 0 2px; color: #1f2a4d; } .mull-count { font-weight: 800; color: #5a3f00; margin: 0 0 10px; } .mull-wait { font-weight: 900; font-size: 1.2rem; }
.mullbtn { width: auto; min-width: 300px; }
.engopt { position: relative; border-radius: 12px; padding: 4px; } .engopt.on { background: var(--coral-l); outline: 4px solid var(--coral); }
.engopt .slot { --w: clamp(70px, 8vw, 110px); }
.chk { position: absolute; top: -6px; right: -6px; background: var(--coral); color: #fff; border-radius: 50%; width: 28px; height: 28px; display: grid; place-items: center; font-weight: 900; z-index: 8; }
.optcard { position: relative; width: clamp(110px, 12vw, 150px); height: auto; transform: none; left: auto; top: auto; display: block; background: none; } .optcard img { width: 100%; border-radius: 6%; } .optlabel { display: block; font-weight: 800; margin-top: 4px; } .optcard:hover { transform: translateY(-6px); }
.zoomable { background: none; border: 0; padding: 0; cursor: zoom-in; width: clamp(96px, 11vw, 150px); border-radius: 6%; transition: transform .15s; } .zoomable:hover, .zoomable:focus-visible { transform: translateY(-6px) scale(1.04); } .zoomable img { width: 100%; }
.zoombox { position: fixed; z-index: 130; right: 16px; top: 50%; transform: translateY(-50%); width: min(340px, 30vw); background: #fff; border: 5px solid var(--purple); border-radius: 22px; box-shadow: 0 16px 50px rgba(38, 48, 77, .5); padding: 10px; animation: pop .12s; cursor: zoom-out; }
.zoombox img { width: 100%; display: block; border-radius: 6%; } .zoombox .zt { display: grid; gap: 4px; padding: 8px 4px 2px; font-size: .9rem; } .zoombox small { color: var(--ink-2); }
.prevgrid { display: grid; grid-template-columns: minmax(200px, 340px) 1fr; gap: 22px; } .prevgrid .card-img { width: 100%; }
.helplist { margin: 0 0 12px; padding-left: 22px; display: grid; gap: 6px; }
.resultcard.win { background-image: var(--art-win, none), linear-gradient(#fffdf0, #d9f7ee); background-size: cover; } .resultcard.loss { background-image: var(--art-lose, none), linear-gradient(#fffdf7, #e6efff); background-size: cover; }
.resultcard h1 { font-family: var(--font-display, inherit); }

/* ---------- tutorial highlighting ---------- */
.tut-hl { position: relative; outline: 5px solid var(--yellow); outline-offset: 3px; border-radius: 16px; animation: tuthl 1.2s ease-in-out infinite; z-index: 70; }
@keyframes tuthl { 50% { outline-color: var(--coral); box-shadow: 0 0 24px 6px rgba(255, 197, 51, .8); } }
.overlay .tut-hl { z-index: 95; }

/* ---------- smaller desktops ---------- */
@media (max-width: 1440px), (max-height: 800px) {
  .badge small { display: none; } .badge { padding: 2px 8px; }
  .ghead { gap: 8px; padding: 4px 10px; } .mstat { font-size: .78rem; padding: 2px 10px; }
  .ghead .btn.sm { padding: 4px 10px; } .btn-label { display: none; }
  .statusbar span { display: none; } .statusbar { padding: 4px 18px; } .mid { height: 38px; }
  .lpnum b { font-size: 1.5rem; } .pbar { min-height: 38px; }
  .tray { grid-template-columns: clamp(150px, 14vw, 200px) minmax(0, 1fr) auto; }
}
@media (max-width: 1180px) { .mstat:not(.turnno) { display: none; } .ahint { display: none; } .tray { grid-template-columns: minmax(0, 1fr) auto; } .guide { display: none; } }
@media (max-height: 700px) { .actstrip { min-height: 40px; } .endbtn { min-height: 58px; } }

/* reduced motion: keep the layout, drop the movement */
@media (prefers-reduced-motion: reduce) {
  .gcard.popin, .gcard.drawin, .gcard.shake, .gcard.glow, .bk.popin, .mcard, .turnbanner, .callout, .lpfloat, .endbtn.glowbtn { animation: none !important; }
  .turnbanner { opacity: 1; } .hcard, .gcard { transition: none; }
}
html.reduce-motion .gcard.popin, html.reduce-motion .gcard.drawin, html.reduce-motion .gcard.shake, html.reduce-motion .gcard.glow, html.reduce-motion .bk.popin,
html.reduce-motion .mcard, html.reduce-motion .turnbanner, html.reduce-motion .callout, html.reduce-motion .lpfloat, html.reduce-motion .endbtn.glowbtn { animation: none !important; }
html.reduce-motion .hcard, html.reduce-motion .gcard { transition: none !important; }

/* action buttons always stay above enlarged hand cards (so they are never hidden behind a raised card) */
.abtns { position: relative; z-index: 60; }
.actstrip { position: relative; }
.hcard.picked { transform: translateY(-12px) scale(1.07); }
.hcard.picked:hover, .hcard:hover, .hcard:focus-within { transform: translateY(-26px) scale(1.3); }

/* K/M chips never wrap and may be wider than a small card */
.chips2 { left: 50%; right: auto; width: max-content; transform: translateX(-50%); }
.chips2 b { white-space: nowrap; line-height: 1.3; }
.slot.rested .chips2 { top: -6px; }

/* ---------- card action menu: one vertical column beside the selected card ---------- */
.amenu { z-index: 90; }
.amenu-in { display: grid; gap: 6px; width: 158px; padding: 8px; background: #fff; border: 4px solid var(--purple); border-radius: 18px; box-shadow: 0 12px 30px rgba(38, 48, 77, .4); animation: pop .12s; }
.amenu-in .btn { width: 100%; justify-content: flex-start; min-height: 40px; padding: 4px 12px; font-size: .95rem; gap: 8px; box-shadow: 0 3px 0 var(--blue-d); white-space: nowrap; }
.amenu-in .btn.mint { box-shadow: 0 3px 0 #0c6f59; } .amenu-in .btn.yellow { box-shadow: 0 3px 0 var(--yellow-d); } .amenu-in .btn.purple { box-shadow: 0 3px 0 var(--purple-d); }
.amenu-in .btn.coral { box-shadow: 0 3px 0 #b03323; } .amenu-in .btn.ghost { box-shadow: 0 3px 0 var(--line); }
.amenu-in .btn[disabled] { opacity: .5; }
.amenu.float { position: fixed; }
/* hand: the menu belongs to the card (moves with it), bottom-aligned so it grows upward and never leaves the screen */
.amenu.inline { position: absolute; left: calc(100% + 10px); bottom: 0; }
.amenu.inline.flip { left: auto; right: calc(100% + 10px); }
.abtn-note { margin-left: auto; color: #5a3f00; font-weight: 800; font-size: .8rem; white-space: nowrap; }
.actstrip .abtns { display: none; }

/* large preview: bigger, and kept clear of the hand tray (works for hand cards and board cards) */
.hoverprev { top: 54px; transform: none; width: min(340px, 26vw); max-height: calc(100vh - 54px - var(--hw) * 1.385 - 128px); overflow: hidden; z-index: 85; }
.hoverprev img { width: auto; max-width: 100%; max-height: calc(100vh - 54px - var(--hw) * 1.385 - 128px - 150px); margin: 0 auto; object-fit: contain; }
.hp-r { color: #7a4f00; font-weight: 800; }

/* ---- Quick (Negate) cards in hand ---- */
.quickbadge { position: absolute; left: 50%; bottom: 4px; transform: translateX(-50%); z-index: 3; background: #6b5b95; color: #fff; border-radius: 99px; padding: 1px 8px; font-size: .62rem; font-weight: 900; letter-spacing: .04em; opacity: .85; white-space: nowrap; box-shadow: var(--shadow-s); }
.quickbadge.on { background: #7b3fe4; opacity: 1; animation: quickpulse 1.6s ease-in-out infinite; }
.gcard.ready { box-shadow: 0 0 0 3px #b388ff, 0 0 16px 4px rgba(123, 63, 228, .55); }
.quickchip { border-color: #c9b3f5; color: #5b3a99; } .quickchip.on { background: #efe5ff; border-color: #7b3fe4; }
.negopt .optlabel { background: #7b3fe4; color: #fff; }
@keyframes quickpulse { 50% { transform: translateX(-50%) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .quickbadge.on { animation: none; } }

/* ---- Discard pile on each battlefield + viewer tabs ---- */
.dcol .pile { position: relative; width: var(--cs); height: calc(var(--cs) * var(--ratio)); padding: 0; border: 3px solid var(--mat-line); border-radius: 10px; background: rgba(255, 255, 255, .45); cursor: pointer; overflow: hidden; display: grid; place-items: center; }
.dcol .pile:hover, .dcol .pile:focus-visible { border-color: var(--yellow); outline: none; transform: translateY(-2px); }
.dcol .pile img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(.85); }
.dcol .pile-n { position: absolute; right: 3px; bottom: 3px; min-width: 22px; height: 22px; padding: 0 5px; border-radius: 99px; background: #2d3561; color: #fff; font-weight: 900; font-size: .78rem; display: grid; place-items: center; box-shadow: var(--shadow-s); }
.dcol .pile-empty { color: #4a557f; font-weight: 900; opacity: .6; }
.dtabs { display: flex; gap: 8px; justify-content: center; margin-bottom: 6px; }
.dtabs button { border: 2px solid #f1d58a; background: #fff; border-radius: 99px; padding: 6px 16px; font-weight: 800; cursor: pointer; color: #5a3f00; }
.dtabs button.on { background: var(--yellow); border-color: #e0a800; }

/* starting hand: 3 cards per row (two balanced rows of 3 for a 6-card hand) */
.mullrow { display: grid; grid-template-columns: repeat(3, max-content); justify-content: center; gap: 14px 16px; }
.resultcard svg.book { display: block; margin: 0 auto; }