/* Türkiye, "Nabız": glazed white tile with cobalt, turquoise and the raised Iznik red. */
:root {
  --bg: #F8F7F2; --ink: #13213F; --ink2: #4F5B75; --line: rgba(19, 33, 63, .14); --panel: #FFFFFF; --panel2: #E9EEF3;
  --accent: #C8372D; --accent-ink: #fff; --pulse: #E85040;
  --hero-bg: #0B1430; --hero-ink: #F0F8F8; --hero-ink2: rgba(240, 248, 248, .66);
  --display: 'Fraunces', Georgia, serif; --body: Inter, system-ui, sans-serif;
  --r: 10px; --r-sm: 6px; --shadow: 0 10px 28px rgba(19, 33, 63, .14);
  --cobalt: #1C3F94; --turq: #1BA1A4; --bole: #C8372D;
}
/* Tile joints: a faint grid like a glazed wall */
body { background-color: var(--bg); background-image: linear-gradient(rgba(28, 63, 148, .05) 1px, transparent 1px), linear-gradient(90deg, rgba(28, 63, 148, .05) 1px, transparent 1px); background-size: 96px 96px; }
.big { font-weight: 600; font-variation-settings: 'SOFT' 50; }
.big em { color: var(--bole); font-weight: 500; }
#pulse { background: radial-gradient(ellipse at 70% 40%, rgba(27, 161, 164, .12), transparent 60%), var(--hero-bg); }
#pulse h1 { font-weight: 600; }
#pulse h1 .n { color: #9FE0DD; }

/* Tile borders between sections: turquoise and cobalt lozenges on glaze */
.trim { height: 26px; background-color: #F8F7F2; border-top: 3px solid var(--cobalt); border-bottom: 3px solid var(--cobalt);
  background-image: radial-gradient(circle at 13px 13px, #C8372D 3px, transparent 3.5px), linear-gradient(45deg, transparent 38%, #1BA1A4 38% 62%, transparent 62%), linear-gradient(-45deg, transparent 38%, #1C3F94 38% 62%, transparent 62%);
  background-size: 26px 26px, 26px 26px, 26px 26px; }

/* The lives sit on a turquoise glaze */
#lives { --bg: #0B5C5E; --ink: #FFFFFF; --ink2: rgba(255, 255, 255, .9); --line: rgba(248, 247, 242, .26); --panel: rgba(248, 247, 242, .1); --panel2: rgba(248, 247, 242, .16);
  background-color: var(--bg); color: var(--ink);
  background-image: radial-gradient(circle at 48px 48px, rgba(248, 247, 242, .12) 6px, transparent 7px), linear-gradient(rgba(248, 247, 242, .07) 1px, transparent 1px), linear-gradient(90deg, rgba(248, 247, 242, .07) 1px, transparent 1px);
  background-size: 96px 96px; }
#lives .big em { color: #FFD9C9; }
.rail-ctl button { color: var(--ink); }

.card { width: 280px; }
.tile { display: block; color: #13213F; }
.tile-face { position: relative; display: block; aspect-ratio: 1 / 1.22; background: #F8F7F2; border: 9px solid #1C3F94; border-radius: 6px; box-shadow: inset 0 0 0 2px #F8F7F2, inset 0 0 0 4px #C8372D, 0 14px 30px rgba(0, 0, 0, .28);
  background-image: radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, .9), transparent 50%); transition: transform .4s; }
.tile-frame { position: absolute; inset: 4px; width: calc(100% - 8px); height: calc(100% - 8px); opacity: .9; }
.tile-num { position: absolute; top: 8px; left: 10px; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: #C8372D; color: #fff; font: 600 14px/1 var(--display); }
.tile-art { position: absolute; left: 9%; right: 9%; top: 7%; }
.tile-art .med { width: 100%; height: auto; }
.tile-name { position: absolute; left: 8px; right: 8px; bottom: 8px; height: 40px; display: grid; place-items: center; background: #1C3F94; color: #F8F7F2; font: italic 600 19px/1 var(--display); border-radius: 3px; white-space: nowrap; }
.tile-name.long { font-size: 15px; }
.tile-cap { display: block; padding: 14px 4px 0; color: var(--ink); }
.tile-size { display: block; font: 500 12px var(--mono); color: #FFE7DC; margin-bottom: 4px; }
.tile-cap > b { display: block; font: 600 22px/1.12 var(--display); }
.tile-cap .tag { display: block; font-size: 14px; color: var(--ink2); margin: 6px 0 10px; min-height: 3.9em; }
.dchips { display: flex; flex-wrap: wrap; gap: 5px; }
.dchip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border-radius: 999px; background: rgba(248, 247, 242, .12); border: 1px solid rgba(248, 247, 242, .3); font-size: 12px; color: var(--ink); }
.card:not(.active) .tile-face { transform: scale(.95); filter: saturate(.85) brightness(.97); }
.card.active .tile-face { transform: translateY(-3px); }
@media (max-width: 819px) { .card { width: min(74vw, 280px); } }

.med .petal { transform-origin: 0 0; transition: transform .7s cubic-bezier(.3, 1.4, .5, 1); }
.med.bloom .petal { animation: tulipIn 1s cubic-bezier(.3, 1.4, .5, 1) both; animation-delay: calc(var(--i) * 70ms); }
@keyframes tulipIn { from { transform: scale(.2); opacity: 0; } to { transform: none; opacity: 1; } }
.med .petal.hi path:last-of-type { stroke: #C8372D; stroke-width: 3; }
.med .plabel { cursor: pointer; }
.med .plabel.hi circle { stroke: #C8372D; stroke-width: 3; }

.life-in .local { color: #C8372D; }
.life-in { --lc-ink: color-mix(in srgb, var(--lc) 65%, #13213F); }
.life-top { border-bottom: 3px solid #1C3F94; }

.mt { border: 1px solid rgba(28, 63, 148, .25); border-top: 5px solid var(--mc); }
.mt-ico { background: var(--mc); color: #fff; }
.take article { border-top: 5px solid #1C3F94; }
.tip { background: #13213F; color: #F8F7F2; }
.p-num, .ns b, .pn b, .l-size .cnt, .stat b, .mname { font-variant-numeric: lining-nums tabular-nums; }
.card { opacity: 1; }
.tile-frame { opacity: .55; }

.tile-field { position: absolute; inset: 6px 6px 52px; width: calc(100% - 12px); height: calc(100% - 58px); }
.tile-art { left: 17%; right: 17%; top: 13%; }
.tile-art .med { filter: drop-shadow(0 3px 6px rgba(19, 33, 63, .25)); }
.tile-motif { position: absolute; top: 12px; right: 12px; font: 500 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: #1C3F94; background: rgba(248, 247, 242, .9); padding: 2px 6px; border-radius: 3px; }

#lives :focus-visible { outline-color: #FFFFFF; }
#lives .dchip { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .5); }
/* Tile border: a cobalt band with white tulips between thin red rules */
.trim { height: 30px; background-color: #1C3F94; border-top: 3px solid #F8F7F2; border-bottom: 3px solid #F8F7F2; box-shadow: inset 0 2px 0 #C8372D, inset 0 -2px 0 #C8372D;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='34' height='24' viewBox='0 0 34 24'%3E%3Cpath d='M17 20 V12' stroke='%23F8F7F2' stroke-width='1.4'/%3E%3Cpath d='M17 12 C12 11 11 6 12.5 3 C14 5 15.5 5.5 17 3.5 C18.5 5.5 20 5 21.5 3 C23 6 22 11 17 12 Z' fill='%23F8F7F2'/%3E%3Ccircle cx='0' cy='12' r='2.2' fill='%231BA1A4'/%3E%3Ccircle cx='34' cy='12' r='2.2' fill='%231BA1A4'/%3E%3C/svg%3E");
  background-size: 34px 24px; background-position: center; background-repeat: repeat-x; }
.tile-band { display: block; width: 100%; height: 22px; margin-top: 10px; border-top: 3px solid #1C3F94; border-bottom: 3px solid #1C3F94; }
.tile-band-l { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink2); margin-top: 6px; }