/* Rumbaroo shared tile + brand styles (used by the landing page and the game). */
@font-face{font-family:"Alfa Slab One";src:url("fonts/alfa-slab-one.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Nunito";src:url("fonts/nunito.woff2") format("woff2");font-weight:200 1000;font-display:swap}
:root{
  --tw:44px; --th:60px;
  --felt:#0e5a34; --felt-2:#0a4428; --felt-3:#062d1a;
  --gold:#d4af37; --gold-2:#f4d77c; --gold-3:#9c7a1e;
  --ivory:#fbf5e3; --ivory-2:#efe3c2; --ink:#1f1a12;
  --t-red:#d0343a; --t-blue:#1d5fd0; --t-green:#12844b; --t-yellow:#d98a00;
  --display:"Alfa Slab One",Rockwell,"Roboto Slab",Georgia,serif;
  --body:"Nunito","Trebuchet MS","Segoe UI",system-ui,sans-serif;
  --felt-noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.22'/%3E%3C/svg%3E");
}

/* ---------- ivory block tile ---------- */
.tile{
  --tile-depth:0 1px 0 #e2d4ac,0 2px 0 #d3c08f,0 3px 0 #c2ab74,0 4px 0 #ad945c,0 6px 10px rgba(0,0,0,.38);
  width:var(--tw);height:var(--th);border-radius:calc(var(--th)*.16);
  background:linear-gradient(170deg,#fffdf5 0%,var(--ivory) 45%,var(--ivory-2) 100%);
  box-shadow:inset 0 1px 0 #fff,inset 0 -3px 4px rgba(120,96,40,.12),var(--tile-depth);
  display:inline-flex;flex-direction:column;align-items:center;justify-content:center;position:relative;flex:0 0 auto;
  font-family:var(--display);font-size:calc(var(--th)*.46);line-height:1;color:var(--ink);
  border:0;padding:0;margin:0 0 4px;user-select:none;-webkit-user-select:none;vertical-align:top;
}
.tile::before{content:"";position:absolute;inset:calc(var(--th)*.07);border-radius:calc(var(--th)*.11);
  box-shadow:inset 0 1px 2px rgba(120,96,40,.25),0 1px 0 rgba(255,255,255,.9);pointer-events:none}
.tile .num{position:relative;text-shadow:0 1px 0 rgba(255,255,255,.9),0 -1px 0 rgba(0,0,0,.08);letter-spacing:-.02em}
.tile.red{color:var(--t-red)} .tile.blue{color:var(--t-blue)} .tile.green{color:var(--t-green)} .tile.yellow{color:var(--t-yellow)}
.tile .ico{display:block;width:calc(var(--tw)*.58);height:calc(var(--tw)*.58);background:currentColor;position:relative;
  -webkit-mask:var(--m) center/contain no-repeat;mask:var(--m) center/contain no-repeat}
.tile .sub{position:relative;font-family:var(--body);font-weight:900;font-size:calc(var(--th)*.14);letter-spacing:.04em;text-transform:uppercase;margin-top:calc(var(--th)*.05);opacity:.9}
/* action tile icons (original, drawn for Rumbaroo) */
.ico-hop{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.4'%3E%3Cpath d='M3 19c2-11 15-11 18 0' stroke-dasharray='2.6 2.4'/%3E%3Cpath d='M17.2 16.6 21 19.4l1-4.4'/%3E%3Crect x='9.3' y='14' width='5.4' height='7' rx='1.2' fill='%23000' stroke='none'/%3E%3C/svg%3E")}
.ico-boomerang{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.2 4.5c3.6-.9 6.4.6 7.8 3.7l1.8 4.2c.9 2 2.5 3.1 5 3.3 1.2.1 1.6 1.4.6 2.1-3.2 2.2-7.4 1.4-9.3-1.9L6.6 9.7C5.7 8 4.4 7.6 3.3 7.3 2 6.9 2.4 4.9 4.2 4.5z' fill='%23000'/%3E%3Cpath d='M20.5 4.5a6 6 0 0 0-6.4-1.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m20.8 1.9-.3 2.8-2.7-.6' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-pouch{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='9' y='2.2' width='6.4' height='8.4' rx='1.3' fill='%23000' transform='rotate%2812 12 6%29'/%3E%3Cpath d='M3.2 10.2h17.6c.5 0 .9.5.8 1-.8 5.7-4.4 10.3-9.6 10.3S3.2 16.9 2.4 11.2c-.1-.5.3-1 .8-1z' fill='%23000'/%3E%3Cpath d='M7 14.2c2.8 1.8 7.2 1.8 10 0' fill='none' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.ico-dingo{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4.5 2.5 8.6 8.2h6.8l4.1-5.7.9 8.6c0 1.2-.4 2.2-1.2 3l-3.3 3.4-1.4 3.9c-.3.7-1 1.1-2.5 1.1s-2.2-.4-2.5-1.1l-1.4-3.9-3.3-3.4c-.8-.8-1.2-1.8-1.2-3z' fill='%23000'/%3E%3Ccircle cx='9.2' cy='11.3' r='1.1' fill='%23fff'/%3E%3Ccircle cx='14.8' cy='11.3' r='1.1' fill='%23fff'/%3E%3Cpath d='M10.6 18.1h2.8l-1.4 1.5z' fill='%23fff'/%3E%3C/svg%3E")}
.ico-mob{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='5' r='2.6' fill='%23000'/%3E%3Ccircle cx='5.2' cy='17' r='2.6' fill='%23000'/%3E%3Ccircle cx='18.8' cy='17' r='2.6' fill='%23000'/%3E%3Cpath d='M16.2 6.6a8.5 8.5 0 0 1 3.7 6.2M14 21.5a8.5 8.5 0 0 1-7.9-.1M3.9 12.8a8.5 8.5 0 0 1 3.7-6.2' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round'/%3E%3Cpath d='m18.2 11.4 1.8 1.6 1.4-2M8.5 22.6 6 21.4l1.3-2.4M6.5 4.6l1.2 2.1-2.3 1' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-outback{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='2' y='3' width='6.5' height='8.5' rx='1.3' fill='%23000'/%3E%3Crect x='15.5' y='12.5' width='6.5' height='8.5' rx='1.3' fill='%23000'/%3E%3Cpath d='M11 5.5h7.5v4.2M13 18.5H5.5v-4.2' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='m16.4 8 2.1 2.6 2.1-2.6M7.6 16l-2.1-2.6L3.4 16' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")}
.ico-dust{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2.3'%3E%3Cpath d='M2.5 5h15.5a2.5 2.5 0 1 0-2.4-3.2'/%3E%3Cpath d='M4.5 9.5h15'/%3E%3Cpath d='M6 14h9.5a2.4 2.4 0 1 1-2.3 3.1'/%3E%3Cpath d='M8 18.5h3'/%3E%3Cpath d='M10 22.5h1.6'/%3E%3C/svg%3E")}
.ico-croc{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.5 9.2c0-1.4 1.1-2.4 2.5-2.4h11.2l6.2-3.9c.8-.5 1.6.4 1.1 1.2L19.6 9.4z' fill='%23000'/%3E%3Cpath d='M4.5 9.2 6 11.6l1.5-2.4L9 11.6l1.5-2.4 1.5 2.4 1.5-2.4 1.5 2.4 1.5-2.4' fill='%23000'/%3E%3Cpath d='M1.5 14.8c0 1.4 1.1 2.4 2.5 2.4h11.2l6.2 3.9c.8.5 1.6-.4 1.1-1.2l-2.9-5.3z' fill='%23000'/%3E%3Cpath d='m4.5 14.8 1.5-2.4 1.5 2.4 1.5-2.4 1.5 2.4 1.5-2.4 1.5 2.4 1.5-2.4 1.5 2.4' fill='%23000'/%3E%3Ccircle cx='12.6' cy='5.2' r='1.6' fill='%23000'/%3E%3C/svg%3E")}
.ico-didge{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M2.3 19.6 14.6 7.3l2.9 2.9L5.1 22.5c-.6.6-1.6.6-2.2 0l-.6-.6c-.6-.6-.6-1.7 0-2.3z' fill='%23000'/%3E%3Cpath d='m13.2 6 1.4-1.4c.4-.4 1.1-.4 1.6 0l3.2 3.2c.4.4.4 1.1 0 1.6L18 10.8' fill='%23000'/%3E%3Cpath d='M17.3 2.6a5 5 0 0 1 4.1 4.1M18.8 .6a8 8 0 0 1 4.6 4.6' fill='none' stroke='%23000' stroke-width='1.7' stroke-linecap='round'/%3E%3Cpath d='M6 17.4l1.6 1.6M9 14.4l1.6 1.6' stroke='%23fff' stroke-width='1.3' stroke-linecap='round'/%3E%3C/svg%3E")}
.ico-plus2{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Crect x='3' y='5.5' width='11' height='14' rx='2.4' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3Crect x='9.5' y='2.5' width='11' height='14' rx='2.4' fill='%23000'/%3E%3Cpath d='M15 6.5v6M12 9.5h6' stroke='%23fff' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.ico-billabong{--m:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c2.4 3.3 3.8 5.7 3.8 7.5a3.8 3.8 0 0 1-7.6 0c0-1.8 1.4-4.2 3.8-7.5z' fill='%23000'/%3E%3Cpath d='M1.5 14.5c2.2 0 2.2-1.6 4.4-1.6s2.2 1.6 4.4 1.6 2.2-1.6 4.4-1.6 2.2 1.6 4.4 1.6 1.9-1.1 3.4-1.4M1.5 18.5c2.2 0 2.2-1.6 4.4-1.6s2.2 1.6 4.4 1.6 2.2-1.6 4.4-1.6 2.2 1.6 4.4 1.6 1.9-1.1 3.4-1.4M1.5 22.5c2.2 0 2.2-1.6 4.4-1.6s2.2 1.6 4.4 1.6 2.2-1.6 4.4-1.6 2.2 1.6 4.4 1.6 1.9-1.1 3.4-1.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E")}
.tile.k-billabong{color:#0f6f7a}
.tile.k-billabong .ico{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1.5c2.4 3.3 3.8 5.7 3.8 7.5a3.8 3.8 0 0 1-7.6 0c0-1.8 1.4-4.2 3.8-7.5z' fill='%231d5fd0'/%3E%3Cpath d='M1.5 14.5c2.2 0 2.2-1.6 4.4-1.6s2.2 1.6 4.4 1.6 2.2-1.6 4.4-1.6 2.2 1.6 4.4 1.6 1.9-1.1 3.4-1.4' fill='none' stroke='%23d0343a' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M1.5 18.5c2.2 0 2.2-1.6 4.4-1.6s2.2 1.6 4.4 1.6 2.2-1.6 4.4-1.6 2.2 1.6 4.4 1.6 1.9-1.1 3.4-1.4' fill='none' stroke='%23d98a00' stroke-width='2.2' stroke-linecap='round'/%3E%3Cpath d='M1.5 22.5c2.2 0 2.2-1.6 4.4-1.6s2.2 1.6 4.4 1.6 2.2-1.6 4.4-1.6 2.2 1.6 4.4 1.6 1.9-1.1 3.4-1.4' fill='none' stroke='%2312844b' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E") center/contain no-repeat;-webkit-mask:none;mask:none;width:calc(var(--tw)*.66);height:calc(var(--tw)*.66)}
.tile.k-billabong .sub{background:linear-gradient(90deg,var(--t-blue),var(--t-red),var(--t-yellow),var(--t-green));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:1}
.tile.wild{color:var(--ink)}
.tile.wild .ico{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 12V1l3 8z' fill='%23d0343a'/%3E%3Cpath d='M12 12h11l-8 3z' fill='%231d5fd0'/%3E%3Cpath d='M12 12v11l-3-8z' fill='%2312844b'/%3E%3Cpath d='M12 12H1l8-3z' fill='%23d98a00'/%3E%3Cpath d='M12 12V1l-3 8zM12 12h11l-8-3zM12 12v11l3-8zM12 12H1l8 3z' fill='%23000' opacity='.18'/%3E%3Ccircle cx='12' cy='12' r='2.2' fill='%23d4af37' stroke='%239c7a1e' stroke-width='.8'/%3E%3C/svg%3E") center/contain no-repeat;
  -webkit-mask:none;mask:none;width:calc(var(--tw)*.7);height:calc(var(--tw)*.7)}
.tile.wild .sub{background:linear-gradient(90deg,var(--t-red),var(--t-yellow),var(--t-green),var(--t-blue));-webkit-background-clip:text;background-clip:text;color:transparent;opacity:1}

/* face-down tile */
.tile.back{background:linear-gradient(160deg,#16784a,var(--felt-2));color:var(--gold-2);
  box-shadow:inset 0 0 0 2px var(--gold),inset 0 1px 0 rgba(255,255,255,.3),0 1px 0 #0b3d24,0 2px 0 #093520,0 3px 0 #072c1a,0 4px 0 #052414,0 6px 10px rgba(0,0,0,.4)}
.tile.back::before{inset:calc(var(--th)*.09);border:1px solid rgba(244,215,124,.45);box-shadow:none}