/* Tile faces for the two tile-matching games. Colours are set per suit; the surrounding game sets the tile size through --tw (a length). */
.mt { position:relative; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:0; padding:0; border:1px solid #b9ad8e; border-radius:calc(var(--tw, 40px) * .14); background:linear-gradient(160deg,#fffdf6,#efe6cf); color:#1f2937; font-family:Georgia,"Times New Roman",serif; line-height:1; overflow:hidden; box-shadow:calc(var(--tw, 40px) * .06) calc(var(--tw, 40px) * .08) 0 #8e8261, calc(var(--tw, 40px) * .11) calc(var(--tw, 40px) * .15) calc(var(--tw, 40px) * .08) rgba(0,0,0,.28); cursor:pointer; transition:transform .12s ease, filter .12s ease; }
.mt .big { font-size:calc(var(--tw, 40px) * .5); font-weight:800; }
.mt .sm { font-size:calc(var(--tw, 40px) * .26); font-weight:800; letter-spacing:-.12em; }
.mt.s0 { color:#0f766e; } .mt.s1 { color:#15803d; } .mt.s2 { color:#b91c1c; }
.mt.wind { color:#1e3a8a; } .mt.sym0 { color:#dc2626; } .mt.sym1 { color:#16a34a; } .mt.sym2 { color:#2563eb; } .mt.flower { color:#be185d; } .mt.season { color:#c2410c; }
.mt.blocked { filter:brightness(.78) saturate(.7); cursor:default; }
.mt:hover:not(.blocked) { transform:translateY(-2px); }
.mt.sel { outline:3px solid #f59e0b; outline-offset:-1px; background:linear-gradient(160deg,#fff4cc,#fbd978); }
.mt.hint { animation:mtHint .8s ease 3; }
@keyframes mtHint { 50% { background:#bbf7d0; box-shadow:0 0 0 3px #22c55e; } }
.mt:focus-visible { outline:3px solid var(--accent); outline-offset:1px; z-index:999 !important; }