/* Grand Austria Hotel — Solo Companion Styles */
/* Self-hosted Google Fonts — no external CDN */

/* ===== Cormorant Garamond (headings) ===== */
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-SemiBold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Cormorant Garamond';
  src: url('fonts/CormorantGaramond-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* ===== Libre Baskerville (body) ===== */
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Libre Baskerville';
  src: url('fonts/LibreBaskerville-Italic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --gold: #b8953e;
  --gold-lt: #dcc77a;
  --gold-dk: #7a5f1f;
  --gold-bg: rgba(184,149,62,0.08);
  --cream: #f4ece0;
  --cream-dk: #e2d5c0;
  --parchment: #f9f3ea;
  --wine: #5c1a2a;
  --wine-lt: #7d2d40;
  --wine-bg: rgba(92,26,42,0.06);
  --forest: #2c4a2e;
  --navy: #1c2330;
  --text: #2c1f14;
  --text-lt: #5a4a3a;
  --text-faint: #8a7a6a;
  --blue: #2e5fa1;
  --red: #9e2a2a;
  --yellow: #c49a1a;
  --green: #2e6e34;
  --border: rgba(184,149,62,0.25);
  --shadow: 0 2px 12px rgba(44,31,20,0.12);

  --heading-font: 'Cormorant Garamond', Georgia, serif;
  --body-font: 'Libre Baskerville', Georgia, serif;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Force light appearance — prevents Safari mobile automatic dark mode */
/* Safari mobile ignores meta tags and html-level color-scheme — must target every element */
*, *::before, *::after {
  color-scheme: light only !important;
}
html {
  color-scheme: light only !important;
  -webkit-text-size-adjust: 100%;
  background-color: #f4ece0;
}

body {
  font-family: var(--body-font);
  background-color: #f4ece0;
  color: #2c1f14;
  min-height: 100vh;
  background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23b8953e' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
}

h1, h2, h3, h4 { font-family: var(--heading-font); color: #5c1a2a; }

/* ===== Layout ===== */
.app { max-width: 860px; margin: 0 auto; padding: 16px; }

/* ===== Header ===== */
.hdr { text-align: center; padding: 24px 16px 16px; position: relative; }
.hdr-orn { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 8px; }
.hdr-line { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, #b8953e, transparent); }
.hdr-diamond { width: 8px; height: 8px; background-color: #b8953e; transform: rotate(45deg); flex-shrink: 0; }
.hdr h1 { font-size: 2rem; color: #5c1a2a; letter-spacing: .06em; font-weight: 700; line-height: 1.15; }
.hdr .sub { font-family: var(--heading-font); font-style: italic; font-size: 1rem; color: #7a5f1f; margin-top: 2px; font-weight: 400; }

/* ===== Panels — hardcoded backgrounds to resist Safari dark mode ===== */
.panel { background-color: #f9f3ea; border: 1px solid rgba(184,149,62,0.25); border-radius: 4px; padding: 24px; margin-bottom: 16px; box-shadow: 0 2px 12px rgba(44,31,20,0.12); position: relative; color: #2c1f14; }
.panel::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, #7a5f1f, #b8953e, #7a5f1f); border-radius: 4px 4px 0 0; }
.panel h2 { font-size: 1.25rem; margin-bottom: 16px; text-align: center; font-weight: 700; letter-spacing: .03em; }

/* ===== Sections ===== */
.sec { margin-bottom: 20px; }
.sec h3 { font-size: .95rem; color: #5c1a2a; margin-bottom: 8px; padding-bottom: 5px; border-bottom: 1px solid #e2d5c0; font-weight: 700; }
.sec p { font-size: .84rem; color: #5a4a3a; margin-bottom: 8px; line-height: 1.55; }

/* ===== Options (difficulty etc) ===== */
.opts { display: flex; flex-wrap: wrap; gap: 8px; }
.opt { flex: 1; min-width: 110px; padding: 10px; border: 1px solid #e2d5c0; border-radius: 4px; background-color: #ffffff; cursor: pointer; transition: all .2s; text-align: center; color: #2c1f14; }
.opt:hover { border-color: #b8953e; background-color: rgba(184,149,62,0.08); }
.opt.sel { border-color: #b8953e; background-color: rgba(184,149,62,0.12); box-shadow: inset 0 0 0 1px #b8953e; }
.opt .ol { font-family: var(--heading-font); font-weight: 700; font-size: .95rem; color: #2c1f14; }
.opt .od { font-size: .72rem; color: #8a7a6a; margin-top: 2px; line-height: 1.3; font-family: var(--body-font); }

/* ===== Module grid ===== */
.mgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mcard { padding: 10px; border: 1px solid #e2d5c0; border-radius: 4px; background-color: #ffffff; cursor: pointer; transition: all .2s; color: #2c1f14; }
.mcard:hover { border-color: #b8953e; }
.mcard.sel { border-color: #b8953e; background-color: rgba(184,149,62,0.08); }
.mcard.dis { opacity: .4; cursor: not-allowed; pointer-events: none; }
.mcard .mn { font-family: var(--heading-font); font-weight: 700; font-size: .88rem; color: #2c1f14; }
.mcard .md { font-size: .72rem; color: #8a7a6a; margin-top: 2px; }
.mtag { display: inline-block; font-size: .65rem; padding: 2px 6px; border-radius: 2px; margin-top: 4px; font-weight: 600; font-family: var(--body-font); letter-spacing: .02em; }
.mtag.leo { background-color: rgba(184,149,62,0.15); color: #7a5f1f; border: 1px solid rgba(184,149,62,0.25); }
.mtag.eli { background-color: rgba(92,26,42,0.08); color: #5c1a2a; border: 1px solid rgba(92,26,42,0.15); }

/* ===== Buttons ===== */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 10px 22px; border: none; border-radius: 4px; font-family: var(--heading-font); font-size: .95rem; font-weight: 700; cursor: pointer; transition: all .2s; letter-spacing: .02em; }
.btn-p { background: linear-gradient(135deg, #7a5f1f, #b8953e); color: #ffffff; box-shadow: 0 2px 8px rgba(184,149,62,0.3); }
.btn-p:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(184,149,62,0.35); }
.btn-s { background-color: #ffffff; color: #2c1f14; border: 1px solid #e2d5c0; }
.btn-s:hover { border-color: #b8953e; background-color: rgba(184,149,62,0.08); }
.btn-d { background-color: rgba(158,42,42,0.08); color: #9e2a2a; border: 1px solid rgba(158,42,42,0.2); }
.btn-d:hover { background-color: rgba(158,42,42,0.15); }
.btn-sm { padding: 5px 12px; font-size: .82rem; }
.btn-bl { width: 100%; }
.btng { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-top: 14px; }

/* ===== Status bar ===== */
.sbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 14px; background-color: #ffffff; border: 1px solid rgba(184,149,62,0.25); border-radius: 4px; margin-bottom: 14px; flex-wrap: nowrap; box-shadow: 0 2px 12px rgba(44,31,20,0.12); }
.si { text-align: center; flex: 1; min-width: 0; }
.sl { font-size: .62rem; text-transform: uppercase; letter-spacing: .1em; color: #8a7a6a; font-family: var(--body-font); }
.sv { font-family: var(--heading-font); font-size: 1.1rem; color: #5c1a2a; font-weight: 700; }
.si-div { width: 1px; height: 28px; background-color: #e2d5c0; flex-shrink: 0; }

/* ===== Score row ===== */
.srow { display: flex; gap: 8px; margin-bottom: 14px; }
.sc { flex: 1; padding: 8px; border-radius: 4px; text-align: center; border: 1px solid #e2d5c0; background-color: #ffffff; }
.sc.pl { border-color: rgba(46,95,161,0.3); background-color: rgba(46,95,161,0.04); }
.sc.bt { border-color: rgba(184,149,62,0.25); background-color: rgba(184,149,62,0.08); }
.sc .sn { font-size: .68rem; text-transform: uppercase; letter-spacing: .08em; color: #8a7a6a; font-family: var(--body-font); }
.sc .svp { font-family: var(--heading-font); font-size: 1.5rem; font-weight: 700; }
.sc.pl .svp { color: #2e5fa1; }
.sc.bt .svp { color: #7a5f1f; }
.sc .sd { font-size: .68rem; color: #8a7a6a; margin-top: 1px; }

/* ===== Turn order ===== */
.turn-order { display: flex; gap: 4px; align-items: center; justify-content: center; margin: 10px 0; flex-wrap: wrap; }
.turn-slot { padding: 5px 10px; border-radius: 4px; font-family: var(--heading-font); font-weight: 700; font-size: .82rem; border: 1px solid #e2d5c0; background-color: #ffffff; min-width: 65px; text-align: center; transition: all .3s; color: #2c1f14; }
.turn-slot.active { background-color: #f9f3ea; border-color: #b8953e; box-shadow: 0 0 0 1px #b8953e; }
.turn-slot.done { opacity: .35; text-decoration: line-through; }
.turn-slot.bot-s { color: #7a5f1f; }
.turn-slot.pl-s { color: #2e5fa1; }
.turn-arrow { color: #8a7a6a; font-size: .7rem; }

/* ===== Info badges ===== */
.ib { display: inline-flex; align-items: center; gap: 3px; padding: 2px 7px; border-radius: 3px; font-size: .78rem; font-weight: 600; white-space: nowrap; margin: 2px; font-family: var(--body-font); }
.ib.gb { background: rgba(46,95,161,0.1); color: #2e5fa1; }
.ib.gr { background: rgba(158,42,42,0.1); color: #9e2a2a; }
.ib.gy { background: rgba(196,154,26,0.1); color: #8a6e10; }
.ib.gg { background: rgba(46,110,52,0.1); color: #2e6e34; }
.ib.ga { background: #fff; color: #5a4a3a; border: 1px dashed #888; }
.ib.di { background: rgba(44,31,20,0.06); color: #2c1f14; }
.ib.em { background: rgba(92,26,42,0.08); color: #5c1a2a; }
.ib.ob { background: rgba(46,95,161,0.08); color: #2e5fa1; }
.ib.st { background: rgba(46,110,52,0.08); color: #2e6e34; }
.ib.da { background: rgba(120,40,120,0.08); color: #6a2a6a; }

/* ===== Number input ===== */
.ni { display: inline-flex; align-items: center; gap: 4px; }
.ni button { width: 26px; height: 26px; border: 1px solid #e2d5c0; background-color: #f9f3ea; color: #2c1f14; border-radius: 3px; cursor: pointer; font-weight: 700; font-size: .85rem; display: flex; align-items: center; justify-content: center; font-family: var(--body-font); }
.ni button:hover { background-color: rgba(184,149,62,0.08); border-color: #b8953e; }
.ni span { min-width: 28px; text-align: center; font-weight: 700; font-size: .95rem; color: #2c1f14; font-family: var(--heading-font); }

/* ===== Exp callout ===== */
.exp { background-color: #f9f3ea; border-left: 3px solid #b8953e; padding: 10px 12px; border-radius: 0 4px 4px 0; font-size: .82rem; line-height: 1.5; color: #5a4a3a; }
.exp strong { color: #5c1a2a; }
.ua { display: block; margin-top: 6px; padding: 6px 10px; background: rgba(46,95,161,0.06); border: 1px solid rgba(46,95,161,0.12); border-radius: 3px; color: #2e5fa1; font-weight: 600; font-size: .78rem; line-height: 1.4; }

/* ===== Setup rules ===== */
.sr { background-color: #ffffff; border: 1px solid rgba(184,149,62,0.25); border-radius: 4px; padding: 16px; margin-bottom: 14px; box-shadow: 0 2px 12px rgba(44,31,20,0.12); }
.sr h3 { color: #5c1a2a; font-size: 1rem; margin-bottom: 10px; }
.sr ul { list-style: none; padding: 0; }
.sr li { padding: 4px 0 4px 18px; position: relative; font-size: .82rem; color: #5a4a3a; line-height: 1.5; }
.sr li::before { content: '\25C6'; position: absolute; left: 2px; color: #b8953e; font-size: .55rem; top: 7px; }

/* ===== Bot card ===== */
.bcard { background-color: #ffffff; border: 1px solid rgba(184,149,62,0.25); border-radius: 4px; overflow: hidden; margin-bottom: 14px; box-shadow: 0 2px 12px rgba(44,31,20,0.12); color: #2c1f14; }
.bcard-h { padding: 8px 14px; background: linear-gradient(135deg, rgba(184,149,62,0.08), rgba(184,149,62,0.15)); border-bottom: 1px solid rgba(184,149,62,0.25); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 4px; }
.bcard-h h4 { font-size: .92rem; color: #5c1a2a; }
.bcard-b { padding: 10px 14px; }
.bsec { padding: 12px 14px; border-bottom: 1px solid rgba(184,149,62,0.1); }
.bsec:last-child { border-bottom: none; }
.bsec-l { font-size: .68rem; text-transform: uppercase; letter-spacing: .1em; color: #8a7a6a; margin-bottom: 5px; font-family: var(--body-font); }
.bsec-c { font-size: .86rem; line-height: 1.5; color: #2c1f14; }

/* ===== Card visual ===== */
.cv { width: 170px; margin: 0 auto; background: linear-gradient(160deg, #e8d5a0, #d4c08a); border-radius: 6px; padding: 8px; box-shadow: 0 2px 8px rgba(44,31,20,0.2); color: #2c1f14; border: 2px solid #b8953e; }
.cv .cvs { background: rgba(255,255,255,0.4); border: 1px solid rgba(0,0,0,0.08); border-radius: 3px; padding: 5px; margin-bottom: 4px; text-align: center; min-height: 28px; display: flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; }
.cv .cvs:last-of-type { margin-bottom: 0; }
.cv .cvh { text-align: center; font-size: 1rem; margin-top: 3px; }
.cgi { display: inline-block; width: 18px; height: 18px; border-radius: 3px; border: 2px solid rgba(0,0,0,0.15); position: relative; }
.cgi.bl { background: #2e5fa1; }
.cgi.rd { background: #9e2a2a; }
.cgi.yw { background: #c49a1a; }
.cgi.gn { background: #2e6e34; }
.cgi.an { background: #ffffff; border-color: #5a4a3a; border-style: dashed; }
.cdi { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; background-color: #ffffff; border-radius: 3px; border: 2px solid #333; font-weight: 900; font-size: .8rem; color: #333; font-family: var(--body-font); }
.cai { display: inline-flex; align-items: center; gap: 2px; font-size: .7rem; font-weight: 700; color: #2c1f14; padding: 1px 4px; border-radius: 2px; }
.cvn { font-size: .6rem; color: rgba(0,0,0,0.3); text-align: center; margin-top: 2px; }

/* ===== Tab bar ===== */
.tbar { display: flex; border: 1px solid rgba(184,149,62,0.25); border-radius: 4px; overflow: hidden; margin-bottom: 14px; background-color: #f9f3ea; }
.tbtn { flex: 1; padding: 8px 5px; border: none; border-right: 1px solid #e2d5c0; background-color: #f4ece0; color: #8a7a6a; font-family: var(--heading-font); font-size: .82rem; font-weight: 700; cursor: pointer; transition: all .2s; }
.tbtn:last-child { border-right: none; }
.tbtn.act { background-color: #ffffff; color: #5c1a2a; box-shadow: inset 0 -2px 0 #b8953e; }
.tbtn:hover:not(.act) { background-color: rgba(184,149,62,0.06); color: #5a4a3a; }

/* ===== Game log ===== */
.alog { max-height: 400px; overflow-y: auto; border: 1px solid #e2d5c0; border-radius: 4px; padding: 10px; background-color: #ffffff; }
.le { font-size: .78rem; padding: 4px 0; border-bottom: 1px solid rgba(226,213,192,.5); color: #5a4a3a; line-height: 1.45; }
.le:last-child { border-bottom: none; }
.lr { font-weight: 700; color: #b8953e; font-size: .7rem; font-family: var(--body-font); }

/* ===== Difficulty symbols ===== */
.di-s { display: inline-block; padding: 1px 5px; border-radius: 2px; font-size: .65rem; font-weight: 700; margin-left: 4px; font-family: var(--body-font); }
.di-a { background-color: rgba(44,31,20,0.05); color: #5a4a3a; }
.di-sv { background-color: rgba(130,130,130,0.12); color: #666; border: 1px solid #b0b0b0; }
.di-g { background-color: rgba(184,149,62,0.15); color: #7a5f1f; border: 1px solid #b8953e; }

/* ===== Animations ===== */
@keyframes fadeIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
.fi { animation: fadeIn .3s ease-out; }

@keyframes turnComplete { 0% { opacity: 0; transform: scale(0.95); } 50% { opacity: 1; transform: scale(1.02); } 100% { opacity: 1; transform: scale(1); } }
.turn-done { animation: turnComplete .4s ease-out; }

/* ===== Ornament ===== */
.ornament { text-align: center; color: #b8953e; font-size: .9rem; letter-spacing: 6px; margin: 8px 0; opacity: .5; }

/* ===== Scrollbar ===== */
::-webkit-scrollbar { width: 5px; }
::-webkit-scrollbar-track { background-color: #e2d5c0; border-radius: 3px; }
::-webkit-scrollbar-thumb { background-color: #b8953e; border-radius: 3px; opacity: .5; }

/* ===== Card Lookup FAB ===== */
.cl-fab { position: fixed; bottom: 16px; right: 16px; z-index: 900; width: 40px; height: 40px; border-radius: 50%; background-color: #5c1a2a; color: #f4ece0; border: 1.5px solid #b8953e; display: flex; align-items: center; justify-content: center; cursor: pointer; box-shadow: 0 2px 10px rgba(44,31,20,.3); transition: all .2s; opacity: .7; font-size: .9rem; line-height: 1; }
.cl-fab:hover { opacity: 1; transform: scale(1.06); box-shadow: 0 3px 14px rgba(44,31,20,.35); }
.cl-fab:active { transform: scale(.96); }

/* ===== Card Lookup Overlay ===== */
.cl-overlay { position: fixed; inset: 0; z-index: 1000; background-color: rgba(44,31,20,.4); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); display: flex; align-items: flex-end; justify-content: center; animation: clSlideIn .2s ease-out; }
@keyframes clSlideIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes clDrawerUp { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
.cl-modal { width: 100%; max-width: 480px; max-height: 82vh; background-color: #f4ece0; border-radius: 14px 14px 0 0; display: flex; flex-direction: column; box-shadow: 0 -4px 20px rgba(0,0,0,.15); overflow: hidden; animation: clDrawerUp .2s ease-out; color: #2c1f14; }
.cl-handle { width: 32px; height: 3.5px; border-radius: 2px; background-color: #b8953e; opacity: .35; margin: 8px auto 0; }
.cl-head { padding: 4px 14px 8px; border-bottom: 1px solid #e2d5c0; flex-shrink: 0; background-color: #f4ece0; }
.cl-head-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.cl-head h3 { font-family: var(--heading-font); font-size: 1rem; color: #5c1a2a; margin: 0; font-weight: 700; }
.cl-close { background-color: #f4ece0; border: none; font-size: 1.2rem; color: #8a7a6a; cursor: pointer; padding: 2px 4px; line-height: 1; border-radius: 4px; transition: all .15s; }
.cl-close:hover { color: #5c1a2a; background-color: rgba(92,26,42,.06); }
.cl-search { width: 100%; padding: 7px 10px 7px 30px; border: 1px solid rgba(184,149,62,0.25); border-radius: 6px; font-family: var(--body-font); font-size: .78rem; background-color: #ffffff; color: #2c1f14; outline: none; box-sizing: border-box; transition: border-color .15s, box-shadow .15s; }
.cl-search:focus { border-color: #b8953e; box-shadow: 0 0 0 2px rgba(184,149,62,.12); }
.cl-search::placeholder { color: #8a7a6a; font-style: italic; font-size: .74rem; }
.cl-search-wrap { position: relative; }
.cl-search-icon { position: absolute; left: 9px; top: 50%; transform: translateY(-50%); font-size: .72rem; color: #8a7a6a; pointer-events: none; }

/* ===== Card Lookup Tabs & List ===== */
.cl-tabs { display: flex; gap: 0; flex-shrink: 0; border-bottom: 1px solid #e2d5c0; background-color: rgba(244,236,224,0.97); }
.cl-tab { flex: 1; padding: 7px 0; text-align: center; font-family: var(--heading-font); font-size: .8rem; font-weight: 600; color: #8a7a6a; background-color: #f4ece0; border: none; cursor: pointer; border-bottom: 2.5px solid transparent; transition: all .15s; }
.cl-tab.active { color: #5c1a2a; border-bottom-color: #b8953e; background-color: rgba(184,149,62,.05); }
.cl-tab:hover:not(.active) { color: #5a4a3a; background-color: rgba(184,149,62,.04); }
.cl-count { font-size: .65rem; color: #8a7a6a; padding: 6px 14px 2px; font-style: italic; }
.cl-results { flex: 1; overflow-y: auto; padding: 4px 10px 16px; -webkit-overflow-scrolling: touch; background-color: #f4ece0; }
.cl-empty { text-align: center; color: #8a7a6a; font-style: italic; font-size: .8rem; padding: 28px 0; }

/* ===== Card items ===== */
.cl-card { padding: 8px 10px; margin-bottom: 5px; border-radius: 5px; border: 1px solid #e2d5c0; transition: border-color .15s; background-color: #ffffff; color: #2c1f14; }
.cl-card:hover { border-color: #b8953e; }
.cl-card.base-card { border-left: 2.5px solid #6a8aaa; }
.cl-card.exp-card { border-left: 2.5px solid #7d2d40; }
.cl-card-top { display: flex; align-items: baseline; gap: 5px; flex-wrap: wrap; margin-bottom: 2px; }
.cl-card-name { font-family: var(--heading-font); font-weight: 700; font-size: .86rem; color: #2c1f14; }
.cl-card-de { font-size: .66rem; color: #8a7a6a; font-style: italic; }
.cl-card-num { font-size: .64rem; color: #7a5f1f; font-weight: 700; background-color: rgba(184,149,62,.1); padding: 1px 4px; border-radius: 2px; white-space: nowrap; font-family: monospace; }

/* Card source badges — identical sizing for base & expansion */
.cl-card-src { display: inline-flex; align-items: center; justify-content: center; font-size: .56rem; font-weight: 700; padding: 0 5px; height: 18px; border-radius: 2px; white-space: nowrap; letter-spacing: .3px; text-transform: uppercase; margin-left: auto; flex-shrink: 0; line-height: 1; font-family: var(--body-font); box-sizing: border-box; }
.cl-card-src.base { background-color: rgba(106,138,170,.12); color: #4a6a8a; border: 1px solid rgba(106,138,170,.2); }
.cl-card-src.exp { background-color: rgba(92,26,42,.08); color: #7d2d40; border: 1px solid rgba(92,26,42,.12); }

.cl-card-meta { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 3px; }
.cl-card-pill { font-size: .62rem; padding: 1px 5px; border-radius: 2px; font-weight: 600; }
.cl-card-cost { background-color: rgba(184,149,62,.12); color: #7a5f1f; border: 1px solid rgba(184,149,62,.18); }
.cl-card-timing { color: #5a4a3a; }
.cl-card-timing.t-onetime { background-color: rgba(106,138,170,.08); border: 1px solid rgba(106,138,170,.15); }
.cl-card-timing.t-round { background-color: rgba(46,95,161,.08); border: 1px solid rgba(46,95,161,.12); color: #2e5fa1; }
.cl-card-timing.t-perm { background-color: rgba(46,110,52,.08); border: 1px solid rgba(46,110,52,.12); color: #2e6e34; }
.cl-card-timing.t-end { background-color: rgba(138,90,42,.08); border: 1px solid rgba(138,90,42,.12); color: #8a5a2a; }
.cl-card-timing.t-bell { background-color: rgba(122,58,106,.08); border: 1px solid rgba(122,58,106,.12); color: #7a3a6a; }
.cl-card-mod { background-color: rgba(92,26,42,.05); color: #5c1a2a; font-style: italic; border: 1px solid rgba(92,26,42,.1); }
.cl-card-effect { font-size: .74rem; color: #5a4a3a; line-height: 1.4; }

/* ===== Mobile Responsive ===== */
@media (max-width: 600px) {
  .app { padding: 10px; }
  .hdr { padding: 16px 10px 12px; }
  .hdr h1 { font-size: 1.5rem; }
  .panel { padding: 14px 12px; }
  .sbar { padding: 8px 10px; gap: 4px; }
  .si { min-width: 0; }
  .sl { font-size: .56rem; letter-spacing: .06em; }
  .sv { font-size: .88rem; }
  .si-div { height: 22px; }
  .turn-order { gap: 3px; margin: 8px 0; }
  .turn-slot { padding: 4px 6px; font-size: .72rem; min-width: 48px; }
  .turn-arrow { font-size: .65rem; }
  .srow { gap: 6px; }
  .sc .svp { font-size: 1.25rem; }
  .bcard-h { padding: 7px 10px; }
  .bcard-h h4 { font-size: .84rem; }
  .bsec { padding: 10px 11px; }
  .bsec-c { font-size: .82rem; }
  .exp { padding: 8px 10px; font-size: .77rem; }
  .ua { padding: 5px 8px; font-size: .74rem; }
  .btn { padding: 9px 16px; font-size: .88rem; }
  .btn-sm { padding: 4px 10px; font-size: .78rem; }
  .btng { gap: 6px; }
  .opts { gap: 6px; }
  .opt { min-width: 90px; padding: 8px; }
  .opt .ol { font-size: .88rem; }
  .mgrid { grid-template-columns: 1fr; }
  .mcard { padding: 8px; }
  .ni button { width: 30px; height: 30px; font-size: .9rem; }
  .ni span { min-width: 32px; font-size: 1rem; }
  .tbar { margin-bottom: 10px; }
  .tbtn { padding: 9px 3px; font-size: .74rem; }
  .cl-modal { max-height: 88vh; border-radius: 12px 12px 0 0; }
  .cl-fab { width: 44px; height: 44px; font-size: 1rem; bottom: 12px; right: 12px; }
  .cl-card { padding: 7px 8px; }
  .cl-card-name { font-size: .82rem; }
  .cl-card-effect { font-size: .72rem; }
  .cl-card-src { font-size: .54rem; height: 17px; }
  .cl-search { padding: 8px 10px 8px 28px; font-size: .8rem; }
  .sec h3 { font-size: .88rem; }
  .sec p { font-size: .8rem; }
}

/* ===== Prevent iOS tap highlight ===== */
button, .opt, .mcard, .cl-tab, .tbtn {
  -webkit-tap-highlight-color: transparent;
}

/* ===== Force light appearance in Safari dark mode ===== */
/* Safari browser ignores color-scheme meta tag; this catches it via CSS */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: light only;
  }
  html, body {
    background-color: #f4ece0 !important;
    color: #2c1f14 !important;
  }
  .panel {
    background-color: #f9f3ea !important;
    color: #2c1f14 !important;
  }
  .bcard, .sr {
    background-color: #ffffff !important;
    color: #2c1f14 !important;
  }
  .sbar, .sc, .opt, .mcard, .turn-slot, .ni, .cl-card, .alog {
    background-color: #ffffff !important;
    color: #2c1f14 !important;
  }
  .cl-modal, .cl-overlay {
    background-color: #f4ece0 !important;
  }
  .cl-overlay {
    background: rgba(44,31,20,.4) !important;
  }
  .cl-search {
    background-color: #ffffff !important;
    color: #2c1f14 !important;
  }
  h1, h2, h3, h4, .bcard-h h4, .cl-head h3 {
    color: #5c1a2a !important;
  }
  .sec p, .bsec-c, .le, .cl-card-effect {
    color: #5a4a3a !important;
  }
  .sl, .bsec-l, .cl-count, .cl-card-de, .turn-arrow {
    color: #8a7a6a !important;
  }
  .exp {
    background-color: #f9f3ea !important;
    color: #5a4a3a !important;
  }
  .cv {
    background: linear-gradient(160deg, #e8d5a0, #d4c08a) !important;
    color: #2c1f14 !important;
  }
  .cv .cvs {
    background-color: rgba(255,255,255,0.4) !important;
  }
  .btn-p {
    background: linear-gradient(135deg, #7a5f1f, #b8953e) !important;
    color: #ffffff !important;
  }
  .btn-s {
    background-color: #ffffff !important;
    color: #2c1f14 !important;
  }
  .tbtn {
    background-color: #f4ece0 !important;
    color: #8a7a6a !important;
  }
  .tbtn.act {
    background-color: #ffffff !important;
    color: #5c1a2a !important;
  }
  .cl-tab {
    background-color: #f4ece0 !important;
    color: #8a7a6a !important;
  }
  .cl-tab.active {
    color: #5c1a2a !important;
  }
  input, select, textarea {
    background-color: #ffffff !important;
    color: #2c1f14 !important;
  }
  img {
    filter: none !important;
  }
}