Dominó Origens

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<script>
  function setAppHeight(){
    var h = (window.visualViewport && window.visualViewport.height) || window.innerHeight;
    document.documentElement.style.setProperty('--app-height', h + 'px');
  }
  setAppHeight();
  window.addEventListener('resize', setAppHeight);
  window.addEventListener('orientationchange', setAppHeight);
  if(window.visualViewport){ window.visualViewport.addEventListener('resize', setAppHeight); }
</script>
<title>Dominó Origens — Menu</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700;9..144,900&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --wood-dark:#2e1c10;
    --wood-mid:#5b3a20;
    --wood-light:#8a5c34;
    --rail:#241408;
    --ivory:#f3ecdd;
    --ivory-hi:#fffaf0;
    --ink:#1c1a17;
    --brass:#c9a227;
    --brass-soft:#e4c766;
    --check-red:#7a221a;
    --check-cream:#efe3c8;
    --tile-back-1:#2a2a2a;
    --tile-back-2:#0f0f0f;
    --felt-green:#16281f;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;
    height:100%;
    height:100dvh;
    font-family:'Inter',sans-serif;
    color:var(--ivory);
    overflow:hidden;
    overscroll-behavior:none;
    position:relative;
    background:#3a2415;
  }
  .bg-art{
    position:fixed;
    inset:0;
    width:100%;
    height:100%;
    z-index:0;
    display:block;
  }
  .bg-scrim{
    position:fixed;
    inset:0;
    z-index:0;
    pointer-events:none;
    background:
      radial-gradient(ellipse 70% 46% at 50% 46%, rgba(20,10,5,0.1), rgba(20,10,5,0.62) 100%),
      linear-gradient(180deg, rgba(15,8,4,0.35) 0%, rgba(15,8,4,0.08) 22%, rgba(15,8,4,0.08) 70%, rgba(15,8,4,0.5) 100%);
  }
  .table-wrap{
    position:relative;
    z-index:1;
    width:100%;
    height:100vh;
    height:100dvh;
    height:calc(var(--app-height, 100vh));
    padding:max(10px, env(safe-area-inset-top)) max(10px, env(safe-area-inset-right)) max(10px, env(safe-area-inset-bottom)) max(10px, env(safe-area-inset-left));
  }
  .felt{
    position:relative;
    width:100%;
    height:100%;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }

/* ---------- HUD ---------- */
  .hud{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    width:100%;
    max-width:440px;
    padding:0;
    margin-bottom:2px;
    font-family:'Fraunces',serif;
    z-index:5;
    flex-shrink:0;
  }
  .brand{
    font-size:1.15rem;
    font-weight:700;
    letter-spacing:0.02em;
    color:var(--brass-soft);
    display:flex;
    flex-direction:column;
    line-height:1.15;
  }
  .brand small{
    font-family:'Inter',sans-serif;
    font-weight:500;
    font-size:0.62rem;
    color:rgba(243,236,221,0.55);
    letter-spacing:0.14em;
    text-transform:uppercase;
  }
  .profile-pill{
    display:flex;
    align-items:center;
    gap:10px;
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    padding:5px 14px 5px 5px;
    font-family:'Inter',sans-serif;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
  }
  .profile-pill:hover{ background:rgba(0,0,0,0.42); border-color:rgba(228,199,102,0.35); }
  .avatar{
    width:30px;height:30px;border-radius:50%;
    background:linear-gradient(160deg,var(--brass-soft),var(--brass));
    display:flex;align-items:center;justify-content:center;
    font-family:'Fraunces',serif;font-weight:700;color:#2a2005;font-size:0.85rem;
    flex-shrink:0;
    overflow:hidden;
  }
  .avatar img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .profile-info{display:flex;flex-direction:column;line-height:1.2;}
  .profile-info .profile-name{font-weight:700;font-size:0.86rem;color:var(--ivory-hi);}
  .profile-info .coins{display:flex;align-items:center;gap:4px;font-weight:600;font-size:0.82rem;color:var(--brass-soft);}
  .profile-info .coins svg{width:12px;height:12px;flex-shrink:0;}
  .profile-info .level{font-size:0.62rem;color:rgba(243,236,221,0.55);letter-spacing:0.06em;text-transform:uppercase;}

.money-pill{
    display:flex;
    align-items:center;
    gap:7px;
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(228,199,102,0.28);
    border-radius:999px;
    padding:8px 16px;
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:0.92rem;
    color:var(--brass-soft);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
  }
  .money-pill:hover{ background:rgba(0,0,0,0.42); border-color:rgba(228,199,102,0.5); }
  .money-pill svg{ width:17px; height:17px; flex-shrink:0; color:var(--brass-soft); }

/* ---------- Menu ---------- */
  .menu-wrap{
    flex:1;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:14px;
    padding:14px 20px 20px;
    overflow-y:auto;
    min-height:0;
  }
  .title-block{
    text-align:center;
    margin-bottom:8px;
    padding-bottom:6px;
  }
  .title-block h1{
    font-family:'Fraunces',serif;
    font-weight:900;
    font-size:clamp(3.1rem, 16vw, 5.2rem);
    line-height:1.15;
    margin:0;
    letter-spacing:-0.01em;
    background:linear-gradient(160deg, var(--ivory-hi), var(--brass-soft) 55%, var(--brass));
    -webkit-background-clip:text;
    background-clip:text;
    -webkit-text-fill-color:transparent;
    text-shadow:0 2px 4px rgba(0,0,0,0.25), 0 8px 30px rgba(0,0,0,0.5), 0 0 46px rgba(228,199,102,0.28);
  }
  .title-block h1 .title-accent{
    display:block;
    font-style:italic;
    font-size:1.06em;
    letter-spacing:0.01em;
    padding-bottom:0.08em;
  }

.menu-list{
    display:flex;
    flex-direction:column;
    gap:11px;
    width:min(100%, 440px);
  }

.tile-btn{
    all:unset;
    box-sizing:border-box;
    display:flex;
    align-items:stretch;
    width:100%;
    background:linear-gradient(155deg, var(--ivory-hi), var(--ivory) 55%, #e2d8bf);
    border-radius:12px;
    box-shadow:0 8px 18px rgba(0,0,0,0.4), inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5);
    cursor:pointer;
    position:relative;
    overflow:hidden;
    opacity:0;
    transform:translateY(14px);
    animation:tileIn .5s cubic-bezier(.22,.68,.32,1.05) forwards;
    transition:transform .18s ease, box-shadow .18s ease;
  }
  .tile-btn::before{
    /* faint wood-grain texture on the ivory face, echoing the table */
    content:'';
    position:absolute; inset:0;
    background:repeating-linear-gradient(91deg, rgba(0,0,0,0.035) 0px, transparent 1.5px, transparent 6px);
    pointer-events:none;
  }
  .tile-btn::after{
    /* light sweep on hover */
    content:'';
    position:absolute; top:0; bottom:0; left:-60%;
    width:40%;
    background:linear-gradient(100deg, transparent, rgba(255,255,255,0.55), transparent);
    transform:skewX(-18deg);
    transition:left .55s ease;
    pointer-events:none;
  }
  .tile-btn:hover::after{ left:130%; }
  .tile-btn:hover{ transform:translateY(-3px); box-shadow:0 14px 24px rgba(0,0,0,0.45), inset 0 0 0 1px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.5); }
  .tile-btn:active{ transform:translateY(0) scale(0.985); }
  .tile-btn:focus-visible{ outline:2px solid var(--brass-soft); outline-offset:3px; }

.tile-pips{
    flex-shrink:0;
    width:22px;
    display:grid;
    grid-template-columns:repeat(2,1fr);
    grid-template-rows:repeat(3,1fr);
    gap:2.5px;
    place-items:center;
    margin:0 2px 0 14px;
    align-self:center;
    opacity:0.85;
  }
  .tile-pips i{
    width:4.5px;height:4.5px;border-radius:50%;
    background:radial-gradient(circle at 35% 30%, #8a6a1f, var(--brass) 70%);
  }
  .tile-icon{
    flex-shrink:0;
    width:52px;
    display:flex;align-items:center;justify-content:center;
    margin:10px 10px 10px 8px;
    border-radius:9px;
    background:linear-gradient(160deg,var(--tile-back-1),var(--tile-back-2));
    box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08), 0 2px 4px rgba(0,0,0,0.3);
  }
  .tile-icon svg{ width:22px;height:22px; color:var(--brass-soft); }
  .tile-divider{ width:1.5px; background:linear-gradient(rgba(0,0,0,0), rgba(0,0,0,0.35) 20%, rgba(0,0,0,0.35) 80%, rgba(0,0,0,0)); margin:8px 0; }
  .tile-text{
    flex:1;
    display:flex;
    flex-wrap:wrap;
    row-gap:4px;
    align-items:center;
    padding:10px 16px 10px 14px;
    color:var(--ink);
    text-align:left;
    min-width:0;
  }
  .tile-text strong{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:1rem;
    color:var(--ink);
  }
  .soon-tag{
    margin-left:10px;
    flex-shrink:0;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:0.6rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(28,26,23,0.55);
    background:rgba(28,26,23,0.08);
    border:1px solid rgba(28,26,23,0.14);
    padding:3px 8px;
    border-radius:999px;
    white-space:nowrap;
  }
  .tile-arrow{
    flex-shrink:0;
    display:flex;align-items:center;
    padding:0 16px 0 4px;
    color:rgba(28,26,23,0.35);
  }
  .tile-arrow svg{ width:16px;height:16px; }

.tile-btn.hero{
    box-shadow:0 12px 22px rgba(0,0,0,0.45), 0 0 0 2px var(--brass-soft), 0 0 26px rgba(228,199,102,0.4);
  }
  .tile-btn.hero:hover{ box-shadow:0 16px 28px rgba(0,0,0,0.5), 0 0 0 2px var(--brass-soft), 0 0 32px rgba(228,199,102,0.55); }
  .tile-btn.hero .tile-icon{ width:58px; margin:8px 10px 8px 8px; background:linear-gradient(160deg, var(--brass-soft), var(--brass)); }
  .tile-btn.hero .tile-icon svg{ width:26px;height:26px; color:#2a2005; }
  .tile-btn.hero .tile-text strong{ font-size:1.12rem; }

@keyframes tileIn{
    from{ opacity:0; transform:translateY(14px); }
    to{ opacity:1; transform:translateY(0); }
  }

.toast{
    position:absolute;
    left:50%;
    bottom:24px;
    transform:translateX(-50%) translateY(16px);
    background:rgba(10,10,10,0.88);
    border:1px solid rgba(255,255,255,0.14);
    padding:10px 20px;
    border-radius:10px;
    font-family:'Fraunces',serif;
    font-size:0.92rem;
    color:var(--brass-soft);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s, transform .3s;
    z-index:20;
    text-align:center;
    max-width:80%;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

/* ---------- HTML badge (own row, above the HUD, right-aligned) ---------- */
  .html-badge-row{
    display:flex;
    justify-content:space-between;
    align-items:center;
    width:100%;
    max-width:440px;
    margin-bottom:6px;
  }
  .html-badge{
    z-index:6;
    font-family:'Inter',sans-serif;
    font-weight:700;
    font-size:0.68rem;
    letter-spacing:0.08em;
    color:rgba(243,236,221,0.55);
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:999px;
    padding:5px 12px;
  }

/* ---------- Info button (top-left, same row as the HTML badge) ---------- */
  .info-btn{
    all:unset;
    z-index:6;
    display:flex;
    align-items:center;
    justify-content:center;
    width:26px;
    height:26px;
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:0.82rem;
    color:rgba(243,236,221,0.7);
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:50%;
    cursor:pointer;
    box-sizing:border-box;
    transition:background .2s, color .2s, transform .2s;
  }
  .info-btn:hover{
    background:rgba(228,199,102,0.18);
    color:var(--ivory-hi);
    transform:translateY(-1px);
  }

/* ---------- History badge (P/V/D, centered between info and HTML badge) ---------- */
  .history-badge{
    z-index:6;
    display:flex;
    align-items:center;
    gap:8px;
    font-family:'Inter',sans-serif;
    font-size:0.68rem;
    letter-spacing:0.02em;
    color:rgba(243,236,221,0.7);
    background:rgba(0,0,0,0.28);
    border:1px solid rgba(255,255,255,0.14);
    border-radius:999px;
    padding:5px 12px;
    white-space:nowrap;
  }
  .history-item b{
    color:var(--brass-soft);
    font-weight:700;
    margin-right:2px;
  }

/* ---------- Info overlay (game description) ---------- */
  .info-overlay{
    position:fixed;
    inset:0;
    z-index:50;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(8,5,3,0.66);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
  .info-overlay.show{ opacity:1; pointer-events:auto; }
  .info-card{
    position:relative;
    width:min(100%, 420px);
    background:linear-gradient(160deg, #3c2716, #201207);
    border:1px solid rgba(228,199,102,0.3);
    border-radius:18px;
    padding:26px 22px 22px;
    box-shadow:0 24px 60px rgba(0,0,0,0.55);
    transform:translateY(10px) scale(0.97);
    transition:transform .22s ease;
  }
  .info-overlay.show .info-card{ transform:translateY(0) scale(1); }
  .info-card h2{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:1.4rem;
    margin:0 0 12px;
    color:var(--brass-soft);
    text-align:center;
  }
  .info-card p{
    margin:0 0 10px;
    font-size:0.86rem;
    line-height:1.55;
    color:rgba(243,236,221,0.8);
  }
  .info-card p:last-of-type{ margin-bottom:0; }
  .info-card .info-credit{
    display:block;
    margin-top:14px;
    text-align:center;
    font-size:0.78rem;
    color:rgba(228,199,102,0.75);
  }
  .info-card .info-credit a{
    color:rgba(228,199,102,0.9);
    text-decoration:none;
    font-weight:600;
  }
  .info-card .info-credit a:hover{ text-decoration:underline; }
  .info-close{
    all:unset;
    position:absolute;
    top:14px; right:14px;
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(228,199,102,0.28);
    color:rgba(243,236,221,0.75);
    cursor:pointer;
    font-size:1.05rem;
    line-height:1;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  }
  .info-close:hover{
    background:rgba(228,199,102,0.16);
    border-color:rgba(228,199,102,0.55);
    color:var(--ivory-hi);
    transform:scale(1.08);
  }
  .info-close:active{ transform:scale(0.94); }

/* ---------- Social / credit footer ---------- */
  .social-links{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:16px;
    margin-top:18px;
    flex-wrap:wrap;
  }
  .social-links a{
    display:flex;
    align-items:center;
    justify-content:center;
    width:40px;
    height:40px;
    color:#fff;
    border:1px solid rgba(255,255,255,0.16);
    border-radius:50%;
    transition:transform .2s, box-shadow .2s, filter .2s;
  }
  .social-links a svg{
    width:18px;
    height:18px;
  }
  .social-links a:hover{
    transform:translateY(-2px);
    filter:brightness(1.12);
    box-shadow:0 6px 14px rgba(0,0,0,0.35);
  }
  .social-links a.icon-fb{ background:#1877F2; }
  .social-links a.icon-ig{
    background:radial-gradient(circle at 30% 107%, #fdf497 0%, #fdf497 5%, #fd5949 45%, #d6249f 60%, #285AEB 90%);
  }
  .social-links a.icon-x{ background:#111; }
  .social-links a.icon-blog{ background:#F0760C; }
  .dev-credit{
    margin-top:12px;
    text-align:center;
    font-family:'Inter',sans-serif;
    font-size:0.72rem;
    color:rgba(243,236,221,0.45);
    letter-spacing:0.02em;
  }
  .dev-credit a{
    color:rgba(228,199,102,0.75);
    text-decoration:none;
    font-weight:600;
  }
  .dev-credit a:hover{ text-decoration:underline; }

/* ---------- Difficulty overlay (chosen before the match starts) ---------- */
  .diff-overlay{
    position:fixed;
    inset:0;
    z-index:40;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:20px;
    background:rgba(8,5,3,0.66);
    backdrop-filter:blur(2px);
    opacity:0;
    pointer-events:none;
    transition:opacity .22s ease;
  }
  .diff-overlay.show{ opacity:1; pointer-events:auto; }
  .diff-card{
    position:relative;
    width:min(100%, 420px);
    background:linear-gradient(160deg, #3c2716, #201207);
    border:1px solid rgba(228,199,102,0.3);
    border-radius:18px;
    padding:26px 22px 22px;
    box-shadow:0 24px 60px rgba(0,0,0,0.55);
    transform:translateY(10px) scale(0.97);
    transition:transform .22s ease;
  }
  .diff-overlay.show .diff-card{ transform:translateY(0) scale(1); }
  .diff-card h2{
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:1.4rem;
    margin:0 0 4px;
    color:var(--brass-soft);
    text-align:center;
  }
  .diff-card > p{
    margin:0 0 18px;
    font-size:0.78rem;
    color:rgba(243,236,221,0.55);
    text-align:center;
    line-height:1.4;
  }
  .diff-close{
    all:unset;
    position:absolute;
    top:14px; right:14px;
    width:30px; height:30px;
    display:flex; align-items:center; justify-content:center;
    border-radius:50%;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(228,199,102,0.28);
    color:rgba(243,236,221,0.75);
    cursor:pointer;
    font-size:1.05rem;
    line-height:1;
    box-shadow:0 2px 6px rgba(0,0,0,0.25);
    transition:background .18s ease, color .18s ease, transform .18s ease, border-color .18s ease;
  }
  .diff-close:hover{
    background:rgba(228,199,102,0.16);
    border-color:rgba(228,199,102,0.55);
    color:var(--ivory-hi);
    transform:scale(1.08);
  }
  .diff-close:active{ transform:scale(0.94); }
  .diff-options{
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  .diff-opt{
    all:unset;
    box-sizing:border-box;
    display:flex;
    flex-direction:column;
    gap:2px;
    width:100%;
    padding:12px 16px;
    border-radius:12px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, transform .1s ease;
  }
  .diff-opt:hover{ background:rgba(228,199,102,0.1); border-color:rgba(228,199,102,0.4); transform:translateY(-1px); }
  .diff-opt:active{ transform:translateY(0) scale(0.99); }
  .diff-opt strong{
    font-family:'Fraunces',serif;
    font-size:1.02rem;
    color:var(--ivory-hi);
  }
  .diff-opt span{
    font-size:0.74rem;
    color:rgba(243,236,221,0.55);
    line-height:1.35;
  }
  .diff-opt[data-diff="facil"] strong{ color:#9fd6a0; }
  .diff-opt[data-diff="medio"] strong{ color:var(--brass-soft); }
  .diff-opt[data-diff="dificil"] strong{ color:#e08a7a; }
  .diff-opt.selected{ background:rgba(228,199,102,0.16); border-color:rgba(228,199,102,0.6); }
  .diff-opt:disabled{ opacity:0.4; cursor:not-allowed; }

.profile-input{
    box-sizing:border-box;
    width:100%;
    padding:13px 16px;
    border-radius:12px;
    background:rgba(255,255,255,0.06);
    border:1px solid rgba(255,255,255,0.16);
    color:var(--ivory-hi);
    font-family:'Inter',sans-serif;
    font-size:0.95rem;
    outline:none;
    transition:border-color .15s ease;
  }
  .profile-input::placeholder{ color:rgba(243,236,221,0.4); }
  .profile-input:focus{ border-color:rgba(228,199,102,0.55); }
  .profile-save-btn{
    all:unset;
    box-sizing:border-box;
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    margin-top:14px;
    padding:13px;
    border-radius:12px;
    background:linear-gradient(160deg,var(--brass-soft),var(--brass));
    color:#2a2005;
    font-family:'Fraunces',serif;
    font-weight:700;
    font-size:0.95rem;
    cursor:pointer;
    text-align:center;
    transition:transform .1s ease;
  }
  .profile-save-btn:active{ transform:scale(0.98); }
  .profile-photo-picker{
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:8px;
    margin-bottom:16px;
    cursor:pointer;
    background:none;
    border:none;
    width:100%;
  }
  .profile-photo-preview{
    position:relative;
    width:76px;height:76px;
    border-radius:50%;
    background:linear-gradient(160deg,var(--brass-soft),var(--brass));
    display:flex;align-items:center;justify-content:center;
    overflow:hidden;
    border:2px solid rgba(228,199,102,0.4);
    box-shadow:0 6px 16px rgba(0,0,0,0.35);
  }
  .profile-photo-preview img{
    width:100%;height:100%;object-fit:cover;display:block;
  }
  .profile-photo-preview span{
    font-family:'Fraunces',serif;font-weight:700;color:#2a2005;font-size:1.6rem;
  }
  .profile-photo-preview .photo-cam{
    position:absolute;
    right:-2px; bottom:-2px;
    width:24px;height:24px;
    border-radius:50%;
    background:var(--rail);
    border:2px solid var(--wood-dark);
    display:flex;align-items:center;justify-content:center;
  }
  .profile-photo-preview .photo-cam svg{ width:12px;height:12px; color:var(--brass-soft); }
  .profile-photo-label{
    font-size:0.72rem;
    color:rgba(243,236,221,0.55);
    text-align:center;
  }
  .profile-gender-group{
    margin-top:12px;
  }
  .profile-gender-label{
    display:block;
    font-size:0.7rem;
    letter-spacing:0.06em;
    text-transform:uppercase;
    color:rgba(243,236,221,0.5);
    margin-bottom:8px;
  }
  .profile-gender-options{
    display:flex;
    gap:8px;
  }
  .gender-opt{
    all:unset;
    box-sizing:border-box;
    flex:1;
    text-align:center;
    padding:10px 6px;
    border-radius:10px;
    background:rgba(255,255,255,0.04);
    border:1px solid rgba(255,255,255,0.1);
    color:rgba(243,236,221,0.75);
    font-family:'Inter',sans-serif;
    font-size:0.8rem;
    font-weight:600;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .gender-opt:hover{ background:rgba(228,199,102,0.1); border-color:rgba(228,199,102,0.35); }
  .gender-opt.selected{
    background:linear-gradient(160deg,var(--brass-soft),var(--brass));
    border-color:transparent;
    color:#2a2005;
  }

@media (max-width:480px){
    .title-block h1{ font-size:3.1rem; }
    .tile-pips{ width:16px; margin:0 0 0 10px; gap:2px; }
    .tile-pips i{ width:3.8px;height:3.8px; }
    .tile-icon{ width:44px; margin:7px 8px 7px 6px; }
    .tile-icon svg{ width:19px;height:19px; }
    .tile-btn.hero .tile-icon{ width:50px; }
    .tile-btn.hero .tile-icon svg{ width:22px;height:22px; }
    .tile-text{ padding:8px 10px 8px 10px; }
    .tile-text strong{ font-size:0.9rem; }
    .soon-tag{ font-size:0.55rem; padding:2.5px 6px; margin-left:6px; }
    .tile-arrow{ padding:0 10px 0 2px; }
    .tile-arrow svg{ width:14px;height:14px; }
  }

@media (max-height:640px){
    .menu-wrap{ gap:10px; padding-top:6px; }
    .title-block{ margin-bottom:0; }
    .title-block h1{ font-size:2.5rem; }
  }

@media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important;}
    .tile-btn{ opacity:1; transform:none; }
  }

/* ---------- popup de conquista desbloqueada (estilo Google Play Games) ---------- */
  .ach-toast-container{
    position:fixed;
    top:max(12px, env(safe-area-inset-top));
    right:max(12px, env(safe-area-inset-right));
    z-index:99999;
    display:flex;
    flex-direction:column;
    gap:8px;
    align-items:flex-end;
    pointer-events:none;
  }
  .ach-toast{
    display:flex;
    align-items:center;
    gap:10px;
    background:linear-gradient(180deg, rgba(38,26,14,0.97), rgba(20,13,7,0.97));
    border:1px solid rgba(228,199,102,0.4);
    box-shadow:0 8px 24px rgba(0,0,0,0.45);
    border-radius:12px;
    padding:9px 14px 9px 9px;
    max-width:280px;
    transform:translateX(120%);
    opacity:0;
    transition:transform 0.35s cubic-bezier(.2,.8,.3,1), opacity 0.35s ease;
  }
  .ach-toast.show{ transform:translateX(0); opacity:1; }
  .ach-toast .ach-toast-icon{
    flex-shrink:0;
    width:38px; height:38px;
    border-radius:50%;
    background:radial-gradient(circle at 32% 28%, var(--brass-soft,#e4c766), var(--brass,#c9a227) 70%);
    display:flex; align-items:center; justify-content:center;
    font-size:1.2rem;
  }
  .ach-toast .ach-toast-body{ min-width:0; }
  .ach-toast .ach-toast-label{
    font-size:0.66rem; letter-spacing:0.06em; text-transform:uppercase;
    color:var(--brass-soft,#e4c766); font-weight:700; display:block; margin-bottom:1px;
  }
  .ach-toast .ach-toast-title{
    font-family:'Fraunces',serif; font-size:0.88rem; color:var(--ivory,#f3ecdd);
    display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }

/* ---------- prévia de pedra (loja) ---------- */
  .sp-tile{
    width:34px; height:66px;
    border-radius:6px;
    display:flex; flex-direction:column; flex-shrink:0;
    border:1px solid rgba(0,0,0,0.45);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), 0 3px 5px rgba(0,0,0,0.35);
  }
  .sp-tile.bg-ivory{ background:radial-gradient(circle at 24% 16%, rgba(255,255,255,0.7), transparent 42%), linear-gradient(155deg, #fffdf6, #e9dfc2 58%, #ddd0af); }
  .sp-tile.bg-black{ background:radial-gradient(circle at 24% 16%, rgba(255,255,255,0.12), transparent 42%), linear-gradient(155deg, #2c2c2c, #161616 58%, #050505); }
  .sp-tile.bg-yellow{ background:radial-gradient(circle at 24% 16%, rgba(255,255,255,0.55), transparent 42%), linear-gradient(155deg, #fde388, #f2c230 58%, #d1a11c); }
  .sp-tile.bg-madeira{
    background:
      radial-gradient(ellipse 4px 3px at 74% 24%, rgba(20,10,4,0.55) 0%, rgba(20,10,4,0.55) 60%, transparent 70%),
      repeating-linear-gradient(88deg, rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px, transparent 2px, transparent 5px),
      repeating-linear-gradient(91deg, rgba(255,214,170,0.07) 0px, transparent 1px, transparent 6px),
      linear-gradient(100deg, rgba(255,255,255,0.14) 0%, transparent 24%),
      linear-gradient(155deg, #a9723f, #7a4b26 55%, #4a2c15);
  }
  .sp-tile.bg-bronze{
    background:
      linear-gradient(122deg, transparent 0%, rgba(255,238,210,0.75) 9%, transparent 18%, transparent 38%, rgba(255,238,210,0.4) 46%, transparent 55%, transparent 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.14) 0px, rgba(255,255,255,0.14) 1px, transparent 2px, transparent 4px),
      linear-gradient(155deg, #e0a868 0%, #ad6f30 45%, #7a4a1c 75%, #4a2b0f 100%);
  }
  .sp-tile.bg-prata{
    background:
      linear-gradient(122deg, transparent 0%, rgba(255,255,255,0.9) 9%, transparent 18%, transparent 38%, rgba(255,255,255,0.55) 46%, transparent 55%, transparent 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 1px, transparent 2px, transparent 4px),
      linear-gradient(155deg, #f1f4f6 0%, #c6cdd3 40%, #8b939a 72%, #565c62 100%);
  }
  .sp-tile.bg-ouro{
    background:
      linear-gradient(122deg, transparent 0%, rgba(255,250,220,0.9) 9%, transparent 18%, transparent 38%, rgba(255,250,220,0.5) 46%, transparent 55%, transparent 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.16) 0px, rgba(255,255,255,0.16) 1px, transparent 2px, transparent 4px),
      linear-gradient(155deg, #f8de8a 0%, #d9ad3c 40%, #a97a1a 72%, #6b4a0c 100%);
  }
  .sp-half{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    place-items:center;
    padding:3px 4px;
  }
  .sp-half:first-child{ border-bottom:1px solid rgba(0,0,0,0.35); box-shadow:0 1px 0 rgba(255,255,255,0.3); }
  .sp-pip{ width:4.2px; height:4.2px; border-radius:50%; box-shadow:inset 0 0.4px 0.4px rgba(255,255,255,0.35), 0 0.5px 1px rgba(0,0,0,0.4); }
  .p1{grid-column:2;grid-row:2;}
  .p2a{grid-column:1;grid-row:1;} .p2b{grid-column:3;grid-row:3;}
  .p3a{grid-column:1;grid-row:1;} .p3b{grid-column:2;grid-row:2;} .p3c{grid-column:3;grid-row:3;}
  .p4a{grid-column:1;grid-row:1;} .p4b{grid-column:3;grid-row:1;} .p4c{grid-column:1;grid-row:3;} .p4d{grid-column:3;grid-row:3;}
  .p5a{grid-column:1;grid-row:1;} .p5b{grid-column:3;grid-row:1;} .p5c{grid-column:2;grid-row:2;} .p5d{grid-column:1;grid-row:3;} .p5e{grid-column:3;grid-row:3;}
  .p6a{grid-column:1;grid-row:1;} .p6b{grid-column:1;grid-row:2;} .p6c{grid-column:1;grid-row:3;} .p6d{grid-column:3;grid-row:1;} .p6e{grid-column:3;grid-row:2;} .p6f{grid-column:3;grid-row:3;}
</style>
</head>
<body>

<rect x="0" y="0" width="400" height="800" fill="url(#wall)"/>
  <rect x="0" y="0" width="400" height="640" fill="url(#planks)"/>
  <rect x="0" y="0" width="400" height="640" fill="#000" opacity="0.05"/>

<g>
    <line x1="70" y1="34" x2="70" y2="88" stroke="#2a1a0e" stroke-width="1.6"/>
    <circle cx="70" cy="100" r="30" fill="url(#bulbGlow)"/>
    <circle cx="70" cy="100" r="6.5" fill="#fff6da"/>
    <line x1="330" y1="30" x2="330" y2="70" stroke="#2a1a0e" stroke-width="1.6"/>
    <circle cx="330" cy="80" r="26" fill="url(#bulbGlow)"/>
    <circle cx="330" cy="80" r="5.5" fill="#fff6da"/>
    <line x1="200" y1="34" x2="200" y2="60" stroke="#2a1a0e" stroke-width="1.6"/>
    <circle cx="200" cy="68" r="22" fill="url(#bulbGlow)"/>
    <circle cx="200" cy="68" r="5" fill="#fff6da"/>
  </g>

<g opacity="0.85">
    <rect x="4" y="150" width="86" height="6" rx="1.5" fill="#2a180c"/>
    <rect x="12" y="118" width="8" height="32" rx="1.5" fill="#4c7a4a"/>
    <rect x="24" y="112" width="7" height="38" rx="1.5" fill="#8a3324"/>
    <rect x="35" y="120" width="8" height="30" rx="1.5" fill="#c9a227"/>
    <rect x="47" y="108" width="7" height="42" rx="1.5" fill="#4c7a4a"/>
    <rect x="58" y="122" width="8" height="28" rx="1.5" fill="#355a86"/>
    <rect x="70" y="114" width="7" height="36" rx="1.5" fill="#8a3324"/>
    <rect x="4" y="200" width="86" height="6" rx="1.5" fill="#2a180c"/>
    <rect x="14" y="172" width="8" height="28" rx="1.5" fill="#c9a227"/>
    <rect x="26" y="166" width="7" height="34" rx="1.5" fill="#355a86"/>
    <rect x="37" y="174" width="8" height="26" rx="1.5" fill="#4c7a4a"/>
    <rect x="49" y="168" width="7" height="32" rx="1.5" fill="#8a3324"/>
    <rect x="60" y="176" width="8" height="24" rx="1.5" fill="#c9a227"/>
  </g>

<g opacity="0.8">
    <rect x="322" y="140" width="74" height="6" rx="1.5" fill="#2a180c"/>
    <rect x="330" y="110" width="7" height="30" rx="1.5" fill="#8a3324"/>
    <rect x="341" y="104" width="8" height="36" rx="1.5" fill="#4c7a4a"/>
    <rect x="353" y="112" width="7" height="28" rx="1.5" fill="#c9a227"/>
    <rect x="364" y="106" width="8" height="34" rx="1.5" fill="#355a86"/>
    <rect x="376" y="114" width="7" height="26" rx="1.5" fill="#8a3324"/>
  </g>

<g opacity="0.9">
    <path d="M18 592 Q10 560 26 536 Q30 566 34 588Z" fill="#2f6b3c"/>
    <path d="M22 592 Q34 552 58 534 Q46 566 40 590Z" fill="#3c8149"/>
    <path d="M30 592 Q46 566 70 558 Q54 580 44 592Z" fill="#2f6b3c"/>
    <path d="M6 590h48l-5 30H11Z" fill="#7a4a26"/>
    <path d="M6 590h48l2 8H4Z" fill="#96602f"/>
  </g>

<rect x="0" y="654" width="400" height="44" fill="url(#azulejo)"/>
  <rect x="0" y="650" width="400" height="5" fill="#c9a227"/>
  <rect x="0" y="695" width="400" height="5" fill="#c9a227"/>

<rect x="0" y="700" width="400" height="100" fill="url(#floorwood)"/>
  <rect x="0" y="700" width="400" height="100" fill="url(#floorboards)"/>
  <rect x="0" y="700" width="400" height="3" fill="#000" opacity="0.35"/>

<g>
    <ellipse cx="34" cy="775" rx="10" ry="3.4" fill="#000" opacity="0.28"/>
    <line x1="86" y1="742" x2="70" y2="770" stroke="#161311" stroke-width="3" stroke-linecap="round"/>
    <line x1="86" y1="742" x2="86" y2="774" stroke="#161311" stroke-width="3" stroke-linecap="round"/>
    <line x1="86" y1="742" x2="102" y2="770" stroke="#161311" stroke-width="3" stroke-linecap="round"/>
    <ellipse cx="86" cy="775" rx="20" ry="5" fill="#100e0c"/>
    <rect x="82" y="706" width="8" height="38" rx="2" fill="#100e0c"/>
    <ellipse cx="86" cy="706" rx="34" ry="10" fill="#8f231f"/>
    <ellipse cx="86" cy="704" rx="34" ry="10" fill="#a9312b"/>
    <ellipse cx="86" cy="704" rx="34" ry="10" fill="none" stroke="#e9dfc8" stroke-width="2.4" opacity="0.85"/>
    <ellipse cx="86" cy="704" rx="10" ry="3" fill="#8f231f" opacity="0.5"/>
  </g>
  
  <g opacity="0.95">
    <ellipse cx="146" cy="782" rx="7" ry="2.4" fill="#000" opacity="0.25"/>
    <line x1="146" y1="752" x2="136" y2="780" stroke="#161311" stroke-width="2.4" stroke-linecap="round"/>
    <line x1="146" y1="752" x2="156" y2="780" stroke="#161311" stroke-width="2.4" stroke-linecap="round"/>
    <rect x="142.5" y="726" width="7" height="30" rx="2" fill="#100e0c"/>
    <ellipse cx="146" cy="724" rx="15" ry="5" fill="#c9a227"/>
    <ellipse cx="146" cy="723" rx="15" ry="5" fill="#e4c766"/>
  </g>

<g>
    <ellipse cx="366" cy="775" rx="10" ry="3.4" fill="#000" opacity="0.28"/>
    <line x1="314" y1="742" x2="298" y2="770" stroke="#161311" stroke-width="3" stroke-linecap="round"/>
    <line x1="314" y1="742" x2="314" y2="774" stroke="#161311" stroke-width="3" stroke-linecap="round"/>
    <line x1="314" y1="742" x2="330" y2="770" stroke="#161311" stroke-width="3" stroke-linecap="round"/>
    <ellipse cx="314" cy="775" rx="20" ry="5" fill="#100e0c"/>
    <rect x="310" y="706" width="8" height="38" rx="2" fill="#100e0c"/>
    <ellipse cx="314" cy="706" rx="34" ry="10" fill="#8f231f"/>
    <ellipse cx="314" cy="704" rx="34" ry="10" fill="#a9312b"/>
    <ellipse cx="314" cy="704" rx="34" ry="10" fill="none" stroke="#e9dfc8" stroke-width="2.4" opacity="0.85"/>
    <ellipse cx="314" cy="704" rx="10" ry="3" fill="#8f231f" opacity="0.5"/>
  </g>
  
  <g opacity="0.95">
    <ellipse cx="254" cy="782" rx="7" ry="2.4" fill="#000" opacity="0.25"/>
    <line x1="254" y1="752" x2="244" y2="780" stroke="#161311" stroke-width="2.4" stroke-linecap="round"/>
    <line x1="254" y1="752" x2="264" y2="780" stroke="#161311" stroke-width="2.4" stroke-linecap="round"/>
    <rect x="250.5" y="726" width="7" height="30" rx="2" fill="#100e0c"/>
    <ellipse cx="254" cy="724" rx="15" ry="5" fill="#c9a227"/>
    <ellipse cx="254" cy="723" rx="15" ry="5" fill="#e4c766"/>
  </g>

<g opacity="0.8">
    <rect x="197" y="702" width="6" height="20" rx="2" fill="#100e0c"/>
    <ellipse cx="200" cy="702" rx="20" ry="6" fill="#a9312b"/>
    <ellipse cx="200" cy="702" rx="20" ry="6" fill="none" stroke="#e9dfc8" stroke-width="1.6" opacity="0.8"/>
  </g>

<rect x="0" y="0" width="400" height="800" fill="#000" opacity="0.06"/>
</svg>
<div class="bg-scrim"></div>

<div class="hud">
        <div class="profile-pill" id="profilePill">
          <div class="avatar" id="avatarInitial">?</div>
          <div class="profile-info">
            <span class="profile-name" id="profileName">Criar perfil</span>
            <span class="level" id="profileLevel">Toque aqui</span>
          </div>
        </div>
        <div class="money-pill" id="moneyPill">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"/><path d="M12 7v10M9.5 9.5c0-1.4 1.2-2 2.5-2s2.5.7 2.5 2c0 2.7-5 1.6-5 4.3 0 1.3 1.2 2.2 2.5 2.2s2.5-.7 2.5-2.2"/></svg>
          <span id="moneyAmount">R$ 500</span>
        </div>
      </div>

<div class="title-block">
        <h1>Dominó <span class="title-accent">Origens</span></h1>
      </div>

<a class="tile-btn hero" href="domino-mesa-bar.html" style="animation-delay:.02s; text-decoration:none;">
          <span class="tile-pips" aria-hidden="true"><i></i><i></i><i></i><i></i><i></i><i></i></span>
          <span class="tile-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h7l-1 8 11-14h-7l0-6z"/></svg>
          </span>
          <span class="tile-divider"></span>
          <span class="tile-text">
            <strong>Partida rápida</strong>
          </span>
          <span class="tile-arrow"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M9 6l6 6-6 6"/></svg></span>
        </a>

<button class="tile-btn" id="betModeBtn" type="button" style="animation-delay:.08s;">
          <span class="tile-pips" aria-hidden="true"><i></i><i></i><i></i><i></i><i style="visibility:hidden"></i><i style="visibility:hidden"></i></span>
          <span class="tile-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="8" cy="14" r="6"/><circle cx="8" cy="14" r="2.4"/><path d="M12.5 5.5A6 6 0 1 1 8.6 16"/></svg>
          </span>
          <span class="tile-divider"></span>
          <span class="tile-text">
            <strong>Modo aposta</strong>
            <span class="soon-tag" style="color:#e08a7a;border-color:rgba(224,138,122,0.4);">Difícil · Melhor de 3</span>
          </span>
        </button>

<button class="tile-btn" id="tourneyModeBtn" type="button" style="animation-delay:.14s;">
          <span class="tile-pips" aria-hidden="true"><i></i><i></i><i style="visibility:hidden"></i><i style="visibility:hidden"></i><i></i><i></i></span>
          <span class="tile-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4h10v4a5 5 0 0 1-10 0V4Z"/><path d="M7 5H4a1 1 0 0 0-1 1c0 2.5 1.5 4 3.5 4.3M17 5h3a1 1 0 0 1 1 1c0 2.5-1.5 4-3.5 4.3"/><path d="M12 13v4M9 21h6M9.5 21c0-2 .8-3 2.5-4 1.7 1 2.5 2 2.5 4"/></svg>
          </span>
          <span class="tile-divider"></span>
          <span class="tile-text">
            <strong>Modo torneio</strong>
            <span class="soon-tag" style="color:#e08a7a;border-color:rgba(224,138,122,0.4);">Difícil · Mata-mata</span>
          </span>
        </button>

<button class="tile-btn" id="shopBtn" type="button" style="animation-delay:.2s;">
          <span class="tile-pips" aria-hidden="true"><i></i><i></i><i style="visibility:hidden"></i><i style="visibility:hidden"></i><i style="visibility:hidden"></i><i style="visibility:hidden"></i></span>
          <span class="tile-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M6 8h12l-1 12H7L6 8Z"/><path d="M9 8V6a3 3 0 0 1 6 0v2"/></svg>
          </span>
          <span class="tile-divider"></span>
          <span class="tile-text">
            <strong>Loja</strong>
            <span class="soon-tag" id="shopSummaryTag">Itens</span>
          </span>
        </button>

<button class="tile-btn" id="medalsBtn" type="button" style="animation-delay:.26s;">
          <span class="tile-pips" aria-hidden="true"><i></i><i style="visibility:hidden"></i><i style="visibility:hidden"></i><i style="visibility:hidden"></i><i style="visibility:hidden"></i><i></i></span>
          <span class="tile-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="9" r="5"/><path d="M9 13.5 7.5 21 12 18.5 16.5 21 15 13.5"/></svg>
          </span>
          <span class="tile-divider"></span>
          <span class="tile-text">
            <strong>Medalhas</strong>
            <span class="soon-tag" id="medalsSummaryTag">🥇0 · 🥈0 · 🥉0</span>
          </span>
        </button>

<button class="tile-btn" id="achievementsBtn" type="button" style="animation-delay:.32s;">
          <span class="tile-pips" aria-hidden="true"><i></i><i></i><i style="visibility:hidden"></i><i style="visibility:hidden"></i><i></i><i></i></span>
          <span class="tile-icon">
            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 3l2.4 4.9 5.4.8-3.9 3.8.9 5.4L12 15.4 7.2 17.9l.9-5.4-3.9-3.8 5.4-.8L12 3Z"/></svg>
          </span>
          <span class="tile-divider"></span>
          <span class="tile-text">
            <strong>Conquistas</strong>
            <span class="soon-tag" id="achievementsSummaryTag">0/28</span>
          </span>
        </button>

</div>

<div class="social-links">
        <a class="social-icon icon-fb" href="https://www.facebook.com/10uilton" target="_blank" rel="noopener" aria-label="Facebook" title="Facebook">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M22 12.06C22 6.5 17.52 2 12 2S2 6.5 2 12.06c0 5.02 3.66 9.18 8.44 9.94v-7.03H7.9v-2.91h2.54V9.85c0-2.5 1.49-3.89 3.77-3.89 1.09 0 2.24.2 2.24.2v2.46h-1.26c-1.24 0-1.63.77-1.63 1.56v1.88h2.78l-.45 2.91h-2.33V22c4.78-.76 8.44-4.92 8.44-9.94Z"/></svg>
        </a>
        <a class="social-icon icon-ig" href="https://www.instagram.com/10uilton" target="_blank" rel="noopener" aria-label="Instagram" title="Instagram">
          <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="3" width="18" height="18" rx="5"/><circle cx="12" cy="12" r="4"/><circle cx="17.3" cy="6.7" r="1.1" fill="currentColor" stroke="none"/></svg>
        </a>
        <a class="social-icon icon-x" href="https://www.x.com/10uilton" target="_blank" rel="noopener" aria-label="X" title="X">
          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true"><path d="M18.24 2h2.76l-6.03 6.9L22 22h-6.83l-4.98-6.5L4.6 22H1.84l6.45-7.38L2 2h6.98l4.5 5.94L18.24 2Zm-1.19 18h1.53L7.02 4H5.38l11.67 16Z"/></svg>
        </a>
        <a class="social-icon icon-blog" href="https://10uilton.blogspot.com" target="_blank" rel="noopener" aria-label="Blog" title="Blog">
          <svg viewBox="0 0 512 512" aria-hidden="true">
            <rect x="128" y="128" width="205" height="255" rx="68" fill="#fff"/>
            <rect x="204" y="203" width="179" height="179" rx="70" fill="#fff"/>
            <rect x="192" y="192" width="92" height="35" rx="17.5" fill="#F0760C"/>
            <rect x="192" y="284" width="127" height="35" rx="17.5" fill="#F0760C"/>
          </svg>
        </a>
      </div>
      <div class="dev-credit">Desenvolvido por <a href="https://10uilton.blogspot.com" target="_blank" rel="noopener">10uilton</a></div>

</div>

<div class="info-overlay" id="infoOverlay">
      <div class="info-card">
        <button class="info-close" id="infoClose" type="button" aria-label="Fechar">✕</button>
        <h2>Sobre o jogo</h2>
        <p>Aquele dominó de bar, só que na palma da mão. Jogo em HTML criado por <strong>10uilton</strong>, com modo torneio de eliminação direta, adversários com nomes bem brasileiros e aquele clima de mesa de madeira e resenha.</p>
        <p>Simples de jogar, difícil de largar.</p>
        <span class="info-credit">Criado por <a href="https://10uilton.blogspot.com" target="_blank" rel="noopener">10uilton</a></span>
      </div>
    </div>

<div class="diff-overlay" id="diffOverlay">
      <div class="diff-card">
        <button class="diff-close" id="diffClose" type="button" aria-label="Fechar">✕</button>
        <h2>Escolha a dificuldade</h2>
        <p>Vale para a partida inteira — dá pra trocar na próxima vez que jogar.</p>
        <div class="diff-options">
          <button class="diff-opt" data-diff="facil" type="button">
            <strong>Fácil</strong>
            <span>Jogadas simples, ótimo para treinar as regras.</span>
          </button>
          <button class="diff-opt" data-diff="medio" type="button">
            <strong>Médio</strong>
            <span>Prioriza dobradas e peças fortes, e já pensa na própria mobilidade.</span>
          </button>
          <button class="diff-opt" data-diff="dificil" type="button">
            <strong>Difícil</strong>
            <span>Conta as peças que já saíram, fecha as pontas pro seu lado e joga pra valer.</span>
          </button>
        </div>
      </div>
    </div>

<div class="diff-overlay" id="betOverlay">
      <div class="diff-card">
        <button class="diff-close" id="betClose" type="button" aria-label="Fechar">✕</button>
        <h2>Modo Aposta — IA Difícil</h2>
        <p>Melhor de 3 partidas somando pontos. Empate no total joga uma partida extra de desempate. Se você vencer, a máquina paga o valor apostado. Se perder, o valor apostado é debitado do seu saldo.</p>
        <div style="display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px 14px;margin:4px 0 14px;font-family:'Inter',sans-serif;">
          <span style="font-size:0.82rem;color:rgba(243,236,221,0.7);">Seu saldo</span>
          <strong id="betSaldoLabel" style="color:var(--brass-soft);font-family:'Fraunces',serif;">R$ 0</strong>
        </div>
        <div class="diff-options" id="betChips">
          <button class="diff-opt" data-bet="500" type="button"><strong>R$ 500</strong><span>Aposta mínima</span></button>
          <button class="diff-opt" data-bet="1000" type="button"><strong>R$ 1.000</strong><span>Aposta média</span></button>
          <button class="diff-opt" data-bet="1500" type="button"><strong>R$ 1.500</strong><span>Aposta máxima</span></button>
        </div>
        <p id="betError" style="color:#e08a7a;font-size:0.78rem;display:none;margin:2px 0 10px;">Saldo insuficiente para essa aposta.</p>
        <button class="profile-save-btn" id="betConfirmBtn" type="button" disabled>Escolha um valor</button>
      </div>
    </div>

<div class="diff-overlay" id="tourneyOverlay">
      <div class="diff-card">
        <button class="diff-close" id="tourneyClose" type="button" aria-label="Fechar">✕</button>
        <div id="tourneyStepSize">
          <h2>Modo Torneio — IA Difícil</h2>
          <p>Eliminação simples: uma partida única por fase contra um adversário novo. Perdeu, saiu do torneio — exceto na semifinal, que te dá uma última chance na disputa de 3º lugar pela medalha de bronze. Vença todas as fases pra levar o prêmio do campeão.</p>
          <div class="diff-options" id="tourneySizes">
            <button class="diff-opt" data-size="4" type="button"><strong>4 jogadores</strong><span>2 fases · Prêmio R$ 1.500</span></button>
            <button class="diff-opt" data-size="8" type="button"><strong>8 jogadores</strong><span>3 fases · Prêmio R$ 5.000</span></button>
            <button class="diff-opt" data-size="16" type="button"><strong>16 jogadores</strong><span>4 fases · Prêmio R$ 10.000</span></button>
            <button class="diff-opt" data-size="32" type="button"><strong>32 jogadores</strong><span>5 fases · Prêmio R$ 15.000</span></button>
          </div>
          <div style="margin-top:6px;border-top:1px solid rgba(255,255,255,0.1);padding-top:12px;">
            <p style="margin:0 0 8px;font-size:0.78rem;color:rgba(243,236,221,0.65);">Adicionar nome de adversário (fica salvo e pode aparecer em torneios futuros)</p>
            <div style="display:flex;gap:8px;">
              <input class="profile-input" id="tourneyNameInput" type="text" maxlength="18" placeholder="Ex: Wesley" autocomplete="off" style="margin:0;flex:1;">
              <button class="diff-close" id="tourneyNameAddBtn" type="button" aria-label="Adicionar" style="position:static;width:44px;height:44px;flex-shrink:0;">+</button>
            </div>
          </div>
        </div>
        <div id="tourneyStepBracket" style="display:none;">
          <h2>Chaveamento</h2>
          <p id="tourneyBracketSubtitle">Seu caminho até o título:<br><span id="tourneyBracketMeta" style="display:block;font-size:0.8rem;color:rgba(243,236,221,0.55);margin-top:4px;"></span></p>
          <div id="tourneyBracketList" style="display:flex;flex-direction:column;gap:8px;margin:4px 0 16px;"></div>
          <button class="profile-save-btn" id="tourneyBackBtn" type="button" style="background:transparent;color:rgba(243,236,221,0.8);border:1px solid rgba(255,255,255,0.16);box-shadow:none;margin-bottom:8px;">Voltar</button>
          <button class="profile-save-btn" id="tourneyStartBtn" type="button">Começar torneio</button>
        </div>
      </div>
    </div>

<div class="diff-overlay" id="medalsOverlay">
      <div class="diff-card">
        <button class="diff-close" id="medalsClose" type="button" aria-label="Fechar">✕</button>
        <h2>Galeria de medalhas</h2>
        <p>Cada torneio disputado até o fim pode render uma medalha, de acordo com a fase em que você parou. Se cair na semifinal, você ainda disputa uma partida decisiva pelo 3º lugar — só leva o bronze se vencer essa partida.</p>
        <div style="display:flex;flex-direction:column;gap:10px;margin:6px 0 4px;">
          <div style="display:flex;align-items:center;gap:14px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:14px 16px;">
            <span style="font-size:1.8rem;">🥇</span>
            <div style="flex:1;">
              <strong style="display:block;font-family:'Fraunces',serif;font-size:1.05rem;">Ouro</strong>
              <span style="font-size:0.78rem;color:rgba(243,236,221,0.6);">Campeão</span>
            </div>
            <b id="medalsOuroCount" style="font-size:1.3rem;color:var(--brass-soft,#e4c766);">0</b>
          </div>
          <div style="display:flex;align-items:center;gap:14px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:14px 16px;">
            <span style="font-size:1.8rem;">🥈</span>
            <div style="flex:1;">
              <strong style="display:block;font-family:'Fraunces',serif;font-size:1.05rem;">Prata</strong>
              <span style="font-size:0.78rem;color:rgba(243,236,221,0.6);">Vice-campeão</span>
            </div>
            <b id="medalsPrataCount" style="font-size:1.3rem;color:var(--brass-soft,#e4c766);">0</b>
          </div>
          <div style="display:flex;align-items:center;gap:14px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:14px 16px;">
            <span style="font-size:1.8rem;">🥉</span>
            <div style="flex:1;">
              <strong style="display:block;font-family:'Fraunces',serif;font-size:1.05rem;">Bronze</strong>
              <span style="font-size:0.78rem;color:rgba(243,236,221,0.6);">Venceu a disputa de 3º lugar</span>
            </div>
            <b id="medalsBronzeCount" style="font-size:1.3rem;color:var(--brass-soft,#e4c766);">0</b>
          </div>
        </div>
      </div>
    </div>

<div class="diff-overlay" id="achievementsOverlay">
      <div class="diff-card" style="max-height:88vh;display:flex;flex-direction:column;">
        <button class="diff-close" id="achievementsClose" type="button" aria-label="Fechar">✕</button>
        <h2>Conquistas</h2>
        <p id="achievementsProgress" style="margin-bottom:10px;">0/28 desbloqueadas</p>
        <div id="achievementsList" style="overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:8px;padding-right:2px;margin-bottom:4px;"></div>
      </div>
    </div>

<div class="diff-overlay" id="shopOverlay">
      <div class="diff-card" style="max-height:88vh;display:flex;flex-direction:column;">
        <button class="diff-close" id="shopClose" type="button" aria-label="Fechar">✕</button>
        <h2>Loja de pedras</h2>
        <p>Escolha o jogo de pedras que vai usar nas suas partidas. Compre com o saldo do jogo e troque quando quiser.</p>
        <div style="display:flex;align-items:center;justify-content:space-between;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.1);border-radius:10px;padding:10px 14px;margin:4px 0 14px;font-family:'Inter',sans-serif;">
          <span style="font-size:0.82rem;color:rgba(243,236,221,0.7);">Seu saldo</span>
          <strong id="shopSaldoLabel" style="color:var(--brass-soft);font-family:'Fraunces',serif;">R$ 0</strong>
        </div>
        <div id="shopList" style="overflow-y:auto;flex:1;display:flex;flex-direction:column;gap:12px;padding-right:2px;margin-bottom:4px;"></div>
      </div>
    </div>

<div class="diff-overlay" id="profileOverlay">
      <div class="diff-card">
        <button class="diff-close" id="profileClose" type="button" aria-label="Fechar">✕</button>
        <h2 id="profileModalTitle">Criar perfil</h2>
        <p>Escolha uma foto, seu nome e sexo para aparecer nas suas partidas.</p>

<button type="button" class="profile-photo-picker" id="profilePhotoPicker">
          <div class="profile-photo-preview" id="profilePhotoPreview">
            <span id="profilePhotoInitial">?</span>
            <div class="photo-cam">
              <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 8h3l2-2h6l2 2h3v11H4V8Z"/><circle cx="12" cy="13" r="3.5"/></svg>
            </div>
          </div>
          <span class="profile-photo-label">Toque para escolher uma foto</span>
        </button>
        <input type="file" id="profilePhotoInput" accept="image/*" style="display:none">

<div class="profile-gender-group">
          <span class="profile-gender-label">Sexo</span>
          <div class="profile-gender-options" id="profileGenderOptions">
            <button type="button" class="gender-opt" data-gender="masculino">Masculino</button>
            <button type="button" class="gender-opt" data-gender="feminino">Feminino</button>
            <button type="button" class="gender-opt" data-gender="outro">Outro</button>
          </div>
        </div>

<button class="profile-save-btn" id="profileSaveBtn" type="button">Salvar</button>
      </div>
    </div>

</div>
</div>

// A dificuldade agora é escolhida ANTES da partida começar: o botão
  // "Partida rápida" abre este painel em vez de ir direto pra mesa.
  const diffOverlay = document.getElementById('diffOverlay');
  function openDiffOverlay(){ diffOverlay.classList.add('show'); }
  function closeDiffOverlay(){ diffOverlay.classList.remove('show'); }

document.getElementById('diffClose').addEventListener('click', closeDiffOverlay);
  diffOverlay.addEventListener('click', function(e){
    if(e.target === diffOverlay) closeDiffOverlay();
  });

diffOverlay.querySelectorAll('.diff-opt').forEach(function(btn){
    btn.addEventListener('click', function(){
      startMatch(btn.getAttribute('data-diff'));
    });
  });

// Se estiver embutido dentro do visualizador combinado (iframe), navega
  // via postMessage em vez de seguir o link de verdade. Se aberto sozinho,
  // o link normal (href) continua funcionando — abre o painel de dificuldade.
  const hero = document.querySelector('.tile-btn.hero');
  if(hero){
    hero.addEventListener('click', function(e){
      e.preventDefault();
      openDiffOverlay();
    });
  }

// ---------- Perfil do jogador e saldo (moedas do jogo) ----------
  const PROFILE_KEY = 'domino_origens_profile';
  const SALDO_KEY = 'domino_origens_saldo';
  const SALDO_INICIAL = 500;

const profileNameEl = document.getElementById('profileName');
  const profileLevelEl = document.getElementById('profileLevel');
  const avatarInitialEl = document.getElementById('avatarInitial');
  const moneyAmountEl = document.getElementById('moneyAmount');

// ---------- Histórico de partidas (P/V/D) ----------
  const STATS_KEY = 'domino_origens_stats';
  function loadStats(){
    try{
      const raw = localStorage.getItem(STATS_KEY);
      const s = raw ? JSON.parse(raw) : {};
      return { gamesPlayed: s.gamesPlayed||0, gamesWon: s.gamesWon||0 };
    }catch(e){ return {gamesPlayed:0, gamesWon:0}; }
  }
  function renderHistory(){
    const s = loadStats();
    const lost = Math.max(0, s.gamesPlayed - s.gamesWon);
    document.getElementById('histPlayed').textContent = s.gamesPlayed;
    document.getElementById('histWon').textContent = s.gamesWon;
    document.getElementById('histLost').textContent = lost;
  }
  renderHistory();

// ---------- Galeria de medalhas (ouro/prata/bronze do modo torneio) ----------
  const MEDALS_KEY = 'domino_origens_medalhas';
  function loadMedals(){
    try{
      const raw = localStorage.getItem(MEDALS_KEY);
      const m = raw ? JSON.parse(raw) : {};
      return { ouro: m.ouro||0, prata: m.prata||0, bronze: m.bronze||0 };
    }catch(e){ return {ouro:0, prata:0, bronze:0}; }
  }
  function renderMedals(){
    const m = loadMedals();
    document.getElementById('medalsOuroCount').textContent = m.ouro;
    document.getElementById('medalsPrataCount').textContent = m.prata;
    document.getElementById('medalsBronzeCount').textContent = m.bronze;
    document.getElementById('medalsSummaryTag').textContent = '🥇' + m.ouro + ' · 🥈' + m.prata + ' · 🥉' + m.bronze;
  }
  renderMedals();
  const medalsOverlay = document.getElementById('medalsOverlay');
  document.getElementById('medalsBtn').addEventListener('click', function(){
    renderMedals();
    medalsOverlay.classList.add('show');
  });
  document.getElementById('medalsClose').addEventListener('click', function(){ medalsOverlay.classList.remove('show'); });
  medalsOverlay.addEventListener('click', function(e){ if(e.target === medalsOverlay) medalsOverlay.classList.remove('show'); });

// ---------- Conquistas ----------
  const ACH_KEY = 'domino_origens_conquistas';
  function loadAchievements(){
    try{
      const raw = localStorage.getItem(ACH_KEY);
      const obj = raw ? JSON.parse(raw) : {};
      return (obj && typeof obj === 'object') ? obj : {};
    }catch(e){ return {}; }
  }
  function unlockAchievement(id){
    const ach = loadAchievements();
    if(ach[id]) return false;
    ach[id] = Date.now();
    try{ localStorage.setItem(ACH_KEY, JSON.stringify(ach)); }catch(e){}
    showAchievementToast(id);
    return true;
  }
  function showAchievementToast(id){
    const def = ACHIEVEMENT_DEFS.find(function(d){ return d.id === id; });
    if(!def) return;
    const container = document.getElementById('achToastContainer');
    if(!container) return;
    const el = document.createElement('div');
    el.className = 'ach-toast';
    const icon = document.createElement('span');
    icon.className = 'ach-toast-icon';
    icon.textContent = def.icon;
    const body = document.createElement('span');
    body.className = 'ach-toast-body';
    const label = document.createElement('span');
    label.className = 'ach-toast-label';
    label.textContent = 'Conquista desbloqueada';
    const title = document.createElement('span');
    title.className = 'ach-toast-title';
    title.textContent = def.title;
    body.appendChild(label);
    body.appendChild(title);
    el.appendChild(icon);
    el.appendChild(body);
    container.appendChild(el);
    requestAnimationFrame(function(){
      requestAnimationFrame(function(){ el.classList.add('show'); });
    });
    setTimeout(function(){
      el.classList.remove('show');
      setTimeout(function(){ el.remove(); }, 400);
    }, 3800);
  }
  const WIN_MILESTONES = [10,50,100,200,300,400,500,600,700,800,900];
  const ACHIEVEMENT_DEFS = [
    {id:'entrou', icon:'🚪', title:'Entrou no Dominó Origens', desc:'Abriu o jogo pela primeira vez.'},
    {id:'primeira_vitoria', icon:'🎉', title:'Primeira partida vencida', desc:'Ganhou sua primeira partida.'},
    {id:'primeira_compra', icon:'🛍️', title:'Primeira compra na loja', desc:'Comprou o primeiro item na loja.'},
    {id:'campeao_4', icon:'🏆', title:'Campeão do torneio com 4 jogadores', desc:'Foi campeão do torneio de 4 jogadores.'},
    {id:'campeao_8', icon:'🏆', title:'Campeão do torneio com 8 jogadores', desc:'Foi campeão do torneio de 8 jogadores.'},
    {id:'campeao_16', icon:'🏆', title:'Campeão do torneio com 16 jogadores', desc:'Foi campeão do torneio de 16 jogadores.'},
    {id:'campeao_32', icon:'🏆', title:'Campeão do torneio com 32 jogadores', desc:'Foi campeão do torneio de 32 jogadores.'},
    {id:'primeira_ouro', icon:'🥇', title:'Primeira medalha de ouro', desc:'Conquistou sua primeira medalha de ouro.'},
    {id:'primeira_prata', icon:'🥈', title:'Primeira medalha de prata', desc:'Conquistou sua primeira medalha de prata.'},
    {id:'primeira_bronze', icon:'🥉', title:'Primeira medalha de bronze', desc:'Conquistou sua primeira medalha de bronze.'},
    {id:'ficando_rico', icon:'💰', title:'Ficando rico', desc:'Alcançou R$ 100.000 no saldo.'},
    {id:'milionario', icon:'💎', title:'Ficando milionário', desc:'Alcançou R$ 1.000.000 no saldo.'},
  ].concat(WIN_MILESTONES.map(function(m){
    return {id:'vitorias_'+m, icon:'🎖️', title:'Ganhou ' + m + ' partidas', desc:'Venceu ' + m + ' partidas no total.'};
  })).concat([
    {id:'lenda_dominio', icon:'👑', title:'Lenda do dominó', desc:'Alcançou 1.000 partidas vencidas.'},
    {id:'jogador_raiz', icon:'🌳', title:'Jogador raiz', desc:'Alcançou 1.000 partidas jogadas.'},
    {id:'venceu_facil', icon:'🟢', title:'Venceu no nível fácil', desc:'Ganhou uma partida contra a IA fácil.'},
    {id:'venceu_medio', icon:'🟡', title:'Venceu no nível médio', desc:'Ganhou uma partida contra a IA média.'},
    {id:'venceu_dificil', icon:'🔴', title:'Venceu no nível difícil', desc:'Ganhou uma partida contra a IA difícil.'}
  ]);
  function renderAchievements(){
    const ach = loadAchievements();
    const unlockedCount = ACHIEVEMENT_DEFS.filter(function(d){ return !!ach[d.id]; }).length;
    document.getElementById('achievementsProgress').textContent = unlockedCount + '/' + ACHIEVEMENT_DEFS.length + ' desbloqueadas';
    document.getElementById('achievementsSummaryTag').textContent = unlockedCount + '/' + ACHIEVEMENT_DEFS.length;
    const list = document.getElementById('achievementsList');
    list.innerHTML = '';
    ACHIEVEMENT_DEFS.forEach(function(def){
      const unlocked = !!ach[def.id];
      const row = document.createElement('div');
      row.style.cssText = 'display:flex;align-items:center;gap:12px;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.1);border-radius:14px;padding:11px 14px;' + (unlocked ? '' : 'opacity:0.45;');
      const icon = document.createElement('span');
      icon.style.cssText = 'font-size:1.5rem;flex-shrink:0;';
      icon.textContent = unlocked ? def.icon : '🔒';
      const body = document.createElement('div');
      body.style.cssText = 'flex:1;min-width:0;';
      const title = document.createElement('strong');
      title.style.cssText = 'display:block;font-family:"Fraunces",serif;font-size:0.92rem;';
      title.textContent = def.title;
      const desc = document.createElement('span');
      desc.style.cssText = 'font-size:0.74rem;color:rgba(243,236,221,0.55);';
      desc.textContent = def.desc;
      body.appendChild(title);
      body.appendChild(desc);
      row.appendChild(icon);
      row.appendChild(body);
      if(unlocked){
        const check = document.createElement('span');
        check.style.cssText = 'font-size:1.1rem;flex-shrink:0;';
        check.textContent = '✅';
        row.appendChild(check);
      }
      list.appendChild(row);
    });
  }
  renderAchievements();
  const achievementsOverlay = document.getElementById('achievementsOverlay');
  document.getElementById('achievementsBtn').addEventListener('click', function(){
    renderAchievements();
    achievementsOverlay.classList.add('show');
  });
  document.getElementById('achievementsClose').addEventListener('click', function(){ achievementsOverlay.classList.remove('show'); });
  achievementsOverlay.addEventListener('click', function(e){ if(e.target === achievementsOverlay) achievementsOverlay.classList.remove('show'); });

// Primeira vez que o jogador abre o jogo.
  unlockAchievement('entrou');
  renderAchievements();

// ---------- Loja de pedras ----------
  // Mesmos dados existem no lado da mesa (domino-mesa) pra pintar as pedras de verdade.
  const TILE_SKINS = [
    {
      id: 'classica',
      name: 'Clássica',
      desc: 'O marfim tradicional, do jeito que sempre foi.',
      price: 0,
      tileBg: 'ivory',
      pipColors: null // usa o pip escuro padrão
    },
    {
      id: 'perola',
      name: 'Preta Pérola',
      desc: 'Pedra preta de plástico com pontinhos brancos.',
      price: 500,
      tileBg: 'black',
      pipColors: {1:'#f4f1ea', 2:'#f4f1ea', 3:'#f4f1ea', 4:'#f4f1ea', 5:'#f4f1ea', 6:'#f4f1ea'}
    },
    {
      id: 'colorida',
      name: 'Preta Colorida',
      desc: 'Pedra preta de plástico com pontos coloridos por número.',
      price: 500,
      tileBg: 'black',
      pipColors: {1:'#f2f0e8', 2:'#3f8fd1', 3:'#4fa84f', 4:'#c1382b', 5:'#e3b400', 6:'#e2792e'}
    },
    {
      id: 'madeira',
      name: 'Madeira',
      desc: 'Pedra de madeira maciça, veios e nós bem realistas.',
      price: 800,
      tileBg: 'madeira',
      pipColors: null // pontos escuros entalhados, do jeito clássico
    },
    {
      id: 'brazukas',
      name: 'Brazukas',
      desc: 'Pedra amarela de plástico com pontinhos verdes.',
      price: 1000,
      tileBg: 'yellow',
      pipColors: {1:'#2f8f3f', 2:'#2f8f3f', 3:'#2f8f3f', 4:'#2f8f3f', 5:'#2f8f3f', 6:'#2f8f3f'}
    },
    {
      id: 'bronze',
      name: 'Bronze',
      desc: 'Pedra de bronze puro, maciça e com brilho metálico real.',
      price: 1500,
      tileBg: 'bronze',
      pipColors: null
    },
    {
      id: 'prata',
      name: 'Prata',
      desc: 'Pedra de prata pura, polida com brilho metálico real.',
      price: 10000,
      tileBg: 'prata',
      pipColors: null
    },
    {
      id: 'ouro',
      name: 'Ouro',
      desc: 'Pedra de ouro puro, maciça e com brilho metálico real.',
      price: 20000,
      tileBg: 'ouro',
      pipColors: null
    }
  ];
  const SKINS_OWNED_KEY = 'domino_origens_pedras_compradas';
  const SKIN_SELECTED_KEY = 'domino_origens_pedra_selecionada';
  function loadOwnedSkins(){
    try{
      const raw = localStorage.getItem(SKINS_OWNED_KEY);
      const arr = raw ? JSON.parse(raw) : ['classica'];
      return Array.isArray(arr) && arr.length ? arr : ['classica'];
    }catch(e){ return ['classica']; }
  }
  function saveOwnedSkins(arr){
    try{ localStorage.setItem(SKINS_OWNED_KEY, JSON.stringify(arr)); }catch(e){}
  }
  function loadSelectedSkin(){
    try{ return localStorage.getItem(SKIN_SELECTED_KEY) || 'classica'; }catch(e){ return 'classica'; }
  }
  function saveSelectedSkin(id){
    try{ localStorage.setItem(SKIN_SELECTED_KEY, id); }catch(e){}
  }
  function shadeColor(hex, percent){
    const n = parseInt(hex.slice(1), 16);
    let r = (n >> 16) + Math.round(255 * percent);
    let g = ((n >> 8) & 0xff) + Math.round(255 * percent);
    let b = (n & 0xff) + Math.round(255 * percent);
    r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b));
    return '#' + (r<<16 | g<<8 | b).toString(16).padStart(6,'0');
  }
  const spPipLayouts = {
    0: [], 1:['p1'], 2:['p2a','p2b'], 3:['p3a','p3b','p3c'],
    4:['p4a','p4b','p4c','p4d'], 5:['p5a','p5b','p5c','p5d','p5e'], 6:['p6a','p6b','p6c','p6d','p6e','p6f']
  };
  function spHalf(n, color){
    const half = document.createElement('div');
    half.className = 'sp-half';
    spPipLayouts[n].forEach(function(cls){
      const p = document.createElement('div');
      p.className = 'sp-pip ' + cls;
      const bg = color ? ('radial-gradient(circle at 32% 28%, ' + shadeColor(color,0.3) + ', ' + color + ' 55%, ' + shadeColor(color,-0.25) + ' 100%)') : 'radial-gradient(circle at 32% 28%, #4a4a4a, #1a1a1a 55%, #000 100%)';
      p.style.background = bg;
      half.appendChild(p);
    });
    return half;
  }
  function spTile(a, b, skin){
    const tile = document.createElement('div');
    const bgClassMap = {black:'bg-black', yellow:'bg-yellow', madeira:'bg-madeira', bronze:'bg-bronze', prata:'bg-prata', ouro:'bg-ouro'};
    tile.className = 'sp-tile ' + (bgClassMap[skin.tileBg] || 'bg-ivory');
    tile.appendChild(spHalf(a, skin.pipColors ? skin.pipColors[a] : null));
    tile.appendChild(spHalf(b, skin.pipColors ? skin.pipColors[b] : null));
    return tile;
  }
  function renderShop(){
    document.getElementById('shopSaldoLabel').textContent = formatMoney(loadSaldo());
    const owned = loadOwnedSkins();
    const selected = loadSelectedSkin();
    document.getElementById('shopSummaryTag').textContent = 'Itens';
    const list = document.getElementById('shopList');
    list.innerHTML = '';
    TILE_SKINS.forEach(function(skin){
      const isOwned = owned.indexOf(skin.id) !== -1;
      const isSelected = selected === skin.id;
      const card = document.createElement('div');
      card.style.cssText = 'background:rgba(0,0,0,0.22);border:1px solid ' + (isSelected ? 'var(--brass-soft,#e4c766)' : 'rgba(255,255,255,0.1)') + ';border-radius:14px;padding:14px 16px;display:flex;flex-direction:column;gap:10px;';

const topRow = document.createElement('div');
      topRow.style.cssText = 'display:flex;align-items:center;justify-content:space-between;gap:10px;';
      const nameWrap = document.createElement('div');
      const nameEl = document.createElement('strong');
      nameEl.style.cssText = 'display:block;font-family:\'Fraunces\',serif;font-size:1.02rem;';
      nameEl.textContent = skin.name + (isSelected ? ' ✓' : '');
      const descEl = document.createElement('span');
      descEl.style.cssText = 'font-size:0.76rem;color:rgba(243,236,221,0.6);';
      descEl.textContent = skin.desc;
      nameWrap.appendChild(nameEl);
      nameWrap.appendChild(descEl);
      const priceEl = document.createElement('b');
      priceEl.style.cssText = 'font-size:1rem;color:var(--brass-soft,#e4c766);white-space:nowrap;';
      priceEl.textContent = skin.price > 0 ? formatMoney(skin.price) : 'Grátis';
      topRow.appendChild(nameWrap);
      topRow.appendChild(priceEl);

const previewRow = document.createElement('div');
      previewRow.style.cssText = 'display:flex;gap:8px;align-items:center;justify-content:center;padding:12px;border-radius:10px;background:' + (skin.tileBg === 'black' ? '#0c0c0c' : 'linear-gradient(155deg,#efe6cd,#d9cba0)') + ';';
      [[6,5],[4,3],[2,1]].forEach(function(pair){
        previewRow.appendChild(spTile(pair[0], pair[1], skin));
      });

card.appendChild(topRow);
      card.appendChild(previewRow);
      card.appendChild(actionBtn);
      list.appendChild(card);
    });
  }
  const shopOverlay = document.getElementById('shopOverlay');
  document.getElementById('shopBtn').addEventListener('click', function(){
    renderShop();
    shopOverlay.classList.add('show');
  });
  document.getElementById('shopClose').addEventListener('click', function(){ shopOverlay.classList.remove('show'); });
  shopOverlay.addEventListener('click', function(e){ if(e.target === shopOverlay) shopOverlay.classList.remove('show'); });
  renderShop();

const profileOverlay = document.getElementById('profileOverlay');
  const profileNameInput = document.getElementById('profileNameInput');
  const profileModalTitle = document.getElementById('profileModalTitle');
  const profilePhotoInput = document.getElementById('profilePhotoInput');
  const profilePhotoPicker = document.getElementById('profilePhotoPicker');
  const profilePhotoInitial = document.getElementById('profilePhotoInitial');
  const genderOptions = document.querySelectorAll('.gender-opt');

let pendingPhoto = null;
  let pendingGender = null;

function setGenderSelection(gender){
    pendingGender = gender;
    genderOptions.forEach(function(btn){
      btn.classList.toggle('selected', btn.getAttribute('data-gender') === gender);
    });
  }

document.getElementById('profilePill').addEventListener('click', openProfileOverlay);
  document.getElementById('profileClose').addEventListener('click', closeProfileOverlay);
  profileOverlay.addEventListener('click', function(e){
    if(e.target === profileOverlay) closeProfileOverlay();
  });

profilePhotoPicker.addEventListener('click', function(){ profilePhotoInput.click(); });
  profilePhotoInput.addEventListener('change', function(){
    const file = profilePhotoInput.files && profilePhotoInput.files[0];
    if(!file) return;
    const reader = new FileReader();
    reader.onload = function(e){
      pendingPhoto = e.target.result;
      setPhotoPreview(pendingPhoto);
    };
    reader.readAsDataURL(file);
  });

genderOptions.forEach(function(btn){
    btn.addEventListener('click', function(){
      setGenderSelection(btn.getAttribute('data-gender'));
    });
  });

document.getElementById('moneyPill').addEventListener('click', function(){
    showToast('Seu saldo: ' + formatMoney(loadSaldo()));
  });

// ---------- Modo Aposta ----------
  const BET_MIN = 500, BET_MAX = 1500;
  const betOverlay = document.getElementById('betOverlay');
  const betSaldoLabel = document.getElementById('betSaldoLabel');
  const betConfirmBtn = document.getElementById('betConfirmBtn');
  const betError = document.getElementById('betError');
  let selectedBet = null;

document.getElementById('betModeBtn').addEventListener('click', openBetOverlay);
  document.getElementById('betClose').addEventListener('click', closeBetOverlay);
  betOverlay.addEventListener('click', function(e){ if(e.target === betOverlay) closeBetOverlay(); });

betConfirmBtn.addEventListener('click', function(){
    if(!selectedBet) return;
    const saldo = loadSaldo();
    if(selectedBet > saldo){
      betError.style.display = 'block';
      return;
    }
    saveSaldo(saldo - selectedBet); // aposta fica reservada até o fim da partida
    renderSaldo();
    closeBetOverlay();
    startMatch('dificil', selectedBet);
  });

// ---------- Modo Torneio ----------
  const TOURNEY_NAME_POOL = [
    'João','José','Pedro','Danilo','Nunes','Pereira','Victor','Henrique','Marques','Carlos',
    'Gabriel','Josué','John','Márcio','Jardiel','Dorival','Felipe','Higor','Ícaro','Alexandre',
    'Abel','Beto','Roberto','Tadeu','Antônio','Joaquim','Francisco','Chico','Artur','Miguel',
    'Luiz','Paulo','Gustavo','Guilherme','Davi','Bernardo','Gilvan','Gilvanildo','Isac','Benjamin',
    'Matheus','Lucas','Nicolas','Jair','Rafael','Murilo','Vicente','Leandro','Leonardo','Emanuel',
    'Eduardo','Edu','Caio','Caíque','Enzo','Augusto','David','Robson','Romário','Ronaldo',
    'Luan','Raul','Breno','Bruno','Cauã','Kawan','Raimundo','Uelton','Nivaldo','William',
    'Uilton','Salvador','Juarez','Juraci','Neto','Júnior','Júlio','Fernando','Xavier','Ana',
    'Maria','Vitória','Karina','Francisca','Franciele','Gabriela','Janaína','Érica','Fernanda','Raissa',
    'Zélia','Isa','Júlia','Raiane','Tatiane','Tatiana','Bárbara','Lúcia','Kaylane','Anita',
    'Eduarda','Carol','Mariana','Raimunda','Cecília','Helena','Juliana','Adriana','Patrícia','Alice',
    'Laura','Isabel','Isabela','Isabelle','Joana','Mônica','Jaciara','Cintia','Taynara','Giovanna',
    'Ângela','Angélica','Débora','Beatriz','Brena','Brenda','Cassia','Fabiano','Giovanni','Hélio',
    'Ivete','Hugo','Ismael','Jefferson','Marcos','Régis','Renan','Stefany','Valdecir','Valquíria','Yuri','Morgana'
  ];
  const TOURNEY_NAMES_KEY = 'domino_origens_nomes_extra';
  const TOURNEY_PRIZES = {4:1500, 8:5000, 16:10000, 32:15000};

function tourneyRoundLabel(roundIndex, totalRounds){
    const remaining = totalRounds - roundIndex; // roundIndex is 0-based here
    if(remaining <= 1) return 'Final / Terceiro lugar';
    if(remaining === 2) return 'Semifinais';
    if(remaining === 3) return 'Quartas de finais';
    if(remaining === 4) return 'Oitavas de finais';
    return '16 de finais';
  }

let pendingTourney = null; // { size, prize, names }

function showTourneyBracket(size, prize, names){
    const rounds = names.length;
    document.getElementById('tourneyBracketMeta').textContent =
      size + ' jogadores · prêmio ' + formatMoney(prize);
    const list = document.getElementById('tourneyBracketList');
    list.innerHTML = '';
    names.forEach(function(name, i){
      const row = document.createElement('div');
      row.style.cssText = 'display:flex;justify-content:space-between;align-items:center;background:rgba(0,0,0,0.22);border:1px solid rgba(255,255,255,0.1);border-radius:12px;padding:10px 14px;';
      const label = document.createElement('span');
      label.style.cssText = 'font-size:0.82rem;color:rgba(243,236,221,0.6);';
      label.textContent = (i+1) + '. ' + tourneyRoundLabel(i, rounds);
      const opp = document.createElement('strong');
      opp.style.cssText = 'font-family:"Fraunces",serif;font-size:0.95rem;color:var(--ink,#f3ecdd);';
      opp.textContent = 'vs ' + name + ' (IA)';
      row.appendChild(label);
      row.appendChild(opp);
      list.appendChild(row);
    });
    tourneyStepSize.style.display = 'none';
    tourneyStepBracket.style.display = '';
  }

document.getElementById('tourneyBackBtn').addEventListener('click', function(){
    tourneyStepSize.style.display = '';
    tourneyStepBracket.style.display = 'none';
  });

document.getElementById('tourneyStartBtn').addEventListener('click', function(){
    if(!pendingTourney) return;
    startTournament(pendingTourney.size, pendingTourney.prize, pendingTourney.names);
  });

// Atualiza saldo/perfil/medalhas/conquistas quando a mesa manda o jogador de volta ao menu.
  window.addEventListener('message', function(e){
    if(e.data && e.data.type === 'domino-refresh'){
      renderSaldo();
      renderProfile();
      renderMedals();
      renderAchievements();
      renderHistory();
    }
  });

// Se ainda não existe perfil, convida o jogador a criar um ao abrir o menu.
  if(!loadProfile()){
    setTimeout(function(){ showToast('Toque no seu perfil para criar um nome'); }, 900);
  }
})();
</script>
</body>
</html>

<!DOCTYPE html>
<html lang="pt-BR">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
<script>
  // Corrige a altura em navegadores mobile (barra de endereço não é contada em 100vh)
  function setAppHeight(){
    var h = (window.visualViewport && window.visualViewport.height) || window.innerHeight;
    document.documentElement.style.setProperty('--app-height', h + 'px');
  }
  setAppHeight();
  window.addEventListener('resize', setAppHeight);
  window.addEventListener('orientationchange', setAppHeight);
  if(window.visualViewport){ window.visualViewport.addEventListener('resize', setAppHeight); }
</script>
<title>Dominó Origens</title>
<link rel="preconnect" href="https://fonts.googleapis.com">
<link href="https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
<style>
  :root{
    --felt-1:#5c3a20;
    --felt-2:#8a5a30;
    --felt-3:#734827;
    --wood-dark:#2e1c10;
    --wood-mid:#5b3a20;
    --wood-light:#8a5c34;
    --wood-shine:#c8935a;
    --rail:#241408;
    --rail-hi:#4a2e18;
    --ivory:#f3ecdd;
    --ivory-hi:#fffaf0;
    --ink:#1c1a17;
    --brass:#c9a227;
    --brass-soft:#e4c766;
    --danger:#b3452f;
    --check-red:#7a221a;
    --check-cream:#efe3c8;
  }
  *{box-sizing:border-box;}
  html,body{
    margin:0;
    height:100%;
    height:100dvh;
    font-family:'Inter',sans-serif;
    color:var(--ivory);
    overflow:hidden;
    overscroll-behavior:none;
    background:var(--rail);
  }
  body{
    background:
      radial-gradient(circle at 50% 0%, rgba(255,255,255,0.06), transparent 60%),
      repeating-conic-gradient(from 0deg, var(--check-red) 0deg 90deg, var(--check-cream) 90deg 180deg) 0 0/34px 34px;
  }
  .table-wrap{
    background:
      repeating-linear-gradient(90deg, rgba(0,0,0,0.3) 0 1px, transparent 1px 6px),
      linear-gradient(155deg, #3a2312, #1c0f06 60%, #120a04);
    box-shadow:inset 0 0 40px rgba(0,0,0,0.6);
  }
  .table-wrap{
    position:relative;
    width:100%;
    height:100vh;
    height:100dvh;
    height:calc(var(--app-height, 100vh));
    padding:18px;
    padding:max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }
  .felt{
    position:relative;
    isolation:isolate;
    width:100%;
    height:100%;
    border-radius:10px;
    background:
      /* wood knots (small dark burls with concentric rings) */
      radial-gradient(ellipse 4px 3px at 80% 30%, rgba(10,5,2,0.7) 0%, rgba(10,5,2,0.7) 60%, transparent 68%),
      radial-gradient(ellipse 8px 6px at 80% 30%, transparent 55%, rgba(90,55,25,0.4) 62%, transparent 70%),
      radial-gradient(ellipse 13px 10px at 80% 30%, transparent 62%, rgba(15,8,3,0.38) 70%, transparent 80%),
      radial-gradient(ellipse 19px 14px at 80% 30%, transparent 72%, rgba(120,75,35,0.22) 80%, transparent 90%),
      radial-gradient(ellipse 3px 2px at 16% 63%, rgba(10,5,2,0.6) 0%, rgba(10,5,2,0.6) 55%, transparent 65%),
      radial-gradient(ellipse 7px 5px at 16% 63%, transparent 55%, rgba(90,55,25,0.32) 65%, transparent 75%),
      radial-gradient(ellipse 11px 8px at 16% 63%, transparent 65%, rgba(15,8,3,0.28) 74%, transparent 84%),
      /* cup rings & watermarks */
      radial-gradient(ellipse 46px 30px at 14% 78%, rgba(20,10,4,0.22), rgba(20,10,4,0.06) 60%, transparent 72%),
      radial-gradient(ellipse 38px 26px at 88% 24%, rgba(20,10,4,0.18), rgba(20,10,4,0.05) 60%, transparent 70%),
      radial-gradient(ellipse 30px 20px at 62% 88%, rgba(20,10,4,0.14), transparent 70%),
      /* fine wood grain streaks, slight diagonal */
      repeating-linear-gradient(88deg, rgba(0,0,0,0.11) 0px, rgba(0,0,0,0.11) 1px, transparent 2px, transparent 5px),
      repeating-linear-gradient(91deg, rgba(255,214,170,0.045) 0px, transparent 1px, transparent 7px),
      repeating-linear-gradient(89deg, rgba(0,0,0,0.06) 0px, transparent 3px, transparent 22px),
      repeating-linear-gradient(90deg, rgba(0,0,0,0.045) 0px, transparent 1px, transparent 3px, rgba(255,200,150,0.02) 4px, transparent 6px),
      /* plank seams running the length of the bar top, each plank with subtle tonal shift */
      repeating-linear-gradient(90deg,
        rgba(0,0,0,0.55) 0 1px,
        rgba(255,255,255,0.04) 1px 2px,
        rgba(255,190,130,0.025) 2px 40px,
        transparent 40px 165px),
      /* soft overhead sheen (varnish) */
      linear-gradient(100deg, rgba(255,255,255,0.10) 0%, transparent 22%),
      radial-gradient(circle at 28% 12%, rgba(255,206,150,0.14), transparent 48%),
      radial-gradient(circle at 78% 92%, rgba(0,0,0,0.42), transparent 55%),
      linear-gradient(160deg, var(--wood-light), var(--wood-mid) 55%, var(--wood-dark));
    box-shadow:
      inset 0 0 0 6px rgba(0,0,0,0.5),
      inset 0 2px 3px rgba(255,220,180,0.12),
      inset 0 0 90px rgba(0,0,0,0.5),
      0 20px 50px rgba(0,0,0,0.6);
    display:grid;
    grid-template-rows:auto auto 1fr auto;
    overflow:hidden;
  }
  .felt::before{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='300'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.22 0.028' numOctaves='4' seed='24' stitchTiles='stitch' result='n'/%3E%3CfeColorMatrix in='n' type='matrix' values='0 0 0 0 0.16  0 0 0 0 0.09  0 0 0 0 0.03  0.65 0.65 0.65 0 -0.32'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
    background-size:260px 300px;
    background-repeat:repeat;
    opacity:0.85;
  }
  .felt::after{
    content:'';
    position:absolute;
    inset:0;
    pointer-events:none;
    border-radius:inherit;
    background:
      linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.05) 46%, transparent 52%),
      repeating-linear-gradient(3deg, transparent 0 40px, rgba(255,255,255,0.02) 40px 41px, transparent 41px 90px);
    mix-blend-mode:overlay;
  }

/* ---------- HUD ---------- */
  .hud{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:space-between;
    gap:8px 10px;
    padding:14px 22px 6px;
    font-family:'Fraunces',serif;
    position:relative;
    z-index:6;
  }
  .score-pill{
    background:rgba(0,0,0,0.3);
    border:1px solid rgba(255,255,255,0.12);
    border-radius:999px;
    padding:8px 18px;
    font-size:0.95rem;
    font-family:'Inter',sans-serif;
    display:flex;
    align-items:center;
    gap:8px;
  }
  .score-pill b{ color:var(--brass-soft); font-size:1.1rem; }
  .dot{width:8px;height:8px;border-radius:50%;background:#666;}
  .dot.active{background:var(--brass-soft); box-shadow:0 0 8px var(--brass-soft);}

/* ---------- Difficulty tag (read-only — chosen before the match, in the menu) ---------- */
  .diff-tag{
    font-size:0.66rem;
    font-family:'Inter',sans-serif;
    font-weight:600;
    letter-spacing:0.03em;
    text-transform:uppercase;
    color:rgba(243,236,221,0.5);
    background:rgba(0,0,0,0.25);
    border-radius:999px;
    padding:2px 8px;
  }
  @media (max-width:380px){
    .diff-tag{padding:2px 6px; font-size:0.6rem;}
  }

/* ---------- AI hand (top) ---------- */
  .ai-row{
    position:relative;
    z-index:2;
    display:flex;
    justify-content:center;
    gap:6px;
    padding:6px 0 0;
    min-height:56px;
  }
  .ai-tile{
    width:26px;
    height:44px;
    border-radius:5px;
    background:
      radial-gradient(circle at 28% 16%, rgba(255,255,255,0.75), transparent 45%),
      linear-gradient(155deg, var(--ivory-hi), var(--ivory) 55%, #ddd0af);
    border:1px solid rgba(45,28,10,0.4);
    box-shadow:
      inset 0 0 0 3px rgba(201,162,39,0.3),
      inset 0 1px 0 rgba(255,255,255,0.65),
      0 3px 0 rgba(160,132,84,0.55),
      0 6px 8px rgba(0,0,0,0.4);
  }

/* ---------- Board (middle) ---------- */
  .board-zone{
    position:relative;
    z-index:2;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:10px;
    overflow:hidden;
    min-height:0;
    min-width:0;
  }
  .board-scroll{
    width:100%;
    max-width:100%;
    max-height:100%;
    overflow-y:auto;
    overflow-x:hidden;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:30px;
    scrollbar-width:thin;
    scrollbar-color:rgba(255,255,255,0.2) transparent;
  }
  .chain{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    justify-content:center;
    gap:0;
    width:100%;
    max-width:900px;
  }
  .placeholder-msg{
    font-family:'Fraunces',serif;
    font-size:1.1rem;
    color:rgba(243,236,221,0.45);
    text-align:center;
  }

/* domino piece on board — bone/ivory tile with visible thickness */
  .piece{
    background:
      radial-gradient(circle at 24% 16%, rgba(255,255,255,0.7), transparent 42%),
      linear-gradient(155deg, var(--ivory-hi), var(--ivory) 58%, #ddd0af);
    border-radius:5px;
    border:1px solid rgba(45,28,10,0.4);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -2px 2px rgba(120,95,55,0.18),
      0 3px 0 rgba(160,132,84,0.55),
      0 6px 9px rgba(0,0,0,0.5);
    position:relative;
    display:flex;
    flex-shrink:0;
  }
  .piece.h{ width:60px; height:30px; margin:2px 0; }
  .piece.v{ width:30px; height:60px; margin:0 2px; flex-direction:column; }
  .piece .half{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    place-items:center;
    padding:4px;
    position:relative;
  }
  .piece.h .half:first-child{
    border-right:1px solid rgba(35,22,8,0.5);
    box-shadow:1px 0 0 rgba(255,255,255,0.5);
  }
  .piece.v .half:first-child{
    border-bottom:1px solid rgba(35,22,8,0.5);
    box-shadow:0 1px 0 rgba(255,255,255,0.5);
  }
  .pip{
    width:5px;height:5px;border-radius:50%;
    background:radial-gradient(circle at 32% 28%, #4a4a4a, var(--ink) 55%, #000 100%);
    box-shadow:
      inset 0 0.5px 0.5px rgba(255,255,255,0.3),
      0 0.5px 0 rgba(255,255,255,0.4),
      0 1px 1.5px rgba(0,0,0,0.45);
  }
  .piece.double .half:first-child{border:none; box-shadow:none;}
  .piece.skin-black{
    background:
      radial-gradient(circle at 24% 16%, rgba(255,255,255,0.12), transparent 42%),
      linear-gradient(155deg, #2c2c2c, #161616 58%, #050505);
    border:1px solid rgba(0,0,0,0.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -2px 2px rgba(0,0,0,0.5),
      0 3px 0 rgba(0,0,0,0.65),
      0 6px 9px rgba(0,0,0,0.5);
  }
  .piece.skin-black.h .half:first-child{ border-right:1px solid rgba(0,0,0,0.7); box-shadow:1px 0 0 rgba(255,255,255,0.1); }
  .piece.skin-black.v .half:first-child{ border-bottom:1px solid rgba(0,0,0,0.7); box-shadow:0 1px 0 rgba(255,255,255,0.1); }
  .piece.skin-black.double .half:first-child{border:none; box-shadow:none;}
  .piece.skin-yellow{
    background:
      radial-gradient(circle at 24% 16%, rgba(255,255,255,0.55), transparent 42%),
      linear-gradient(155deg, #fdE388, #f2c230 58%, #d1a11c);
    border:1px solid rgba(90,65,10,0.5);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.55),
      inset 0 -2px 2px rgba(120,85,10,0.2),
      0 3px 0 rgba(150,110,15,0.55),
      0 6px 9px rgba(0,0,0,0.45);
  }
  .piece.skin-yellow.h .half:first-child{ border-right:1px solid rgba(90,65,10,0.5); box-shadow:1px 0 0 rgba(255,255,255,0.4); }
  .piece.skin-yellow.v .half:first-child{ border-bottom:1px solid rgba(90,65,10,0.5); box-shadow:0 1px 0 rgba(255,255,255,0.4); }
  .piece.skin-yellow.double .half:first-child{border:none; box-shadow:none;}
  .piece.skin-madeira{
    background:
      radial-gradient(ellipse 5px 4px at 78% 26%, rgba(20,10,4,0.55) 0%, rgba(20,10,4,0.55) 60%, transparent 70%),
      radial-gradient(ellipse 9px 7px at 78% 26%, transparent 58%, rgba(90,55,25,0.35) 66%, transparent 76%),
      repeating-linear-gradient(88deg, rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px, transparent 2px, transparent 5px),
      repeating-linear-gradient(91deg, rgba(255,214,170,0.07) 0px, transparent 1px, transparent 6px),
      linear-gradient(100deg, rgba(255,255,255,0.14) 0%, transparent 24%),
      linear-gradient(155deg, #a9723f, #7a4b26 55%, #4a2c15);
    border:1px solid rgba(35,20,8,0.6);
    box-shadow:
      inset 0 1px 0 rgba(255,214,170,0.25),
      inset 0 -2px 2px rgba(35,20,8,0.35),
      0 3px 0 rgba(60,36,18,0.6),
      0 6px 9px rgba(0,0,0,0.5);
  }
  .piece.skin-madeira.h .half:first-child{ border-right:1px solid rgba(35,20,8,0.6); box-shadow:1px 0 0 rgba(255,214,170,0.2); }
  .piece.skin-madeira.v .half:first-child{ border-bottom:1px solid rgba(35,20,8,0.6); box-shadow:0 1px 0 rgba(255,214,170,0.2); }
  .piece.skin-madeira.double .half:first-child{border:none; box-shadow:none;}

/* ---------- metais nobres: bronze, prata, ouro ---------- */
  .piece.skin-bronze{
    background:
      linear-gradient(122deg, transparent 0%, rgba(255,238,210,0.75) 9%, transparent 18%, transparent 38%, rgba(255,238,210,0.4) 46%, transparent 55%, transparent 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.14) 0px, rgba(255,255,255,0.14) 1px, transparent 2px, transparent 4px),
      linear-gradient(155deg, #e0a868 0%, #ad6f30 45%, #7a4a1c 75%, #4a2b0f 100%);
    border:1px solid rgba(50,28,10,0.7);
    box-shadow:
      inset 0 1px 1px rgba(255,240,210,0.6),
      inset 0 -2px 3px rgba(40,20,5,0.5),
      0 3px 0 rgba(60,34,12,0.65),
      0 6px 10px rgba(0,0,0,0.55);
  }
  .piece.skin-bronze.h .half:first-child{ border-right:1px solid rgba(50,28,10,0.7); box-shadow:1px 0 0 rgba(255,240,210,0.35); }
  .piece.skin-bronze.v .half:first-child{ border-bottom:1px solid rgba(50,28,10,0.7); box-shadow:0 1px 0 rgba(255,240,210,0.35); }
  .piece.skin-bronze.double .half:first-child{border:none; box-shadow:none;}

.piece.skin-prata{
    background:
      linear-gradient(122deg, transparent 0%, rgba(255,255,255,0.9) 9%, transparent 18%, transparent 38%, rgba(255,255,255,0.55) 46%, transparent 55%, transparent 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 1px, transparent 2px, transparent 4px),
      linear-gradient(155deg, #f1f4f6 0%, #c6cdd3 40%, #8b939a 72%, #565c62 100%);
    border:1px solid rgba(60,64,68,0.6);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.85),
      inset 0 -2px 3px rgba(40,44,48,0.4),
      0 3px 0 rgba(90,96,102,0.6),
      0 6px 10px rgba(0,0,0,0.5);
  }
  .piece.skin-prata.h .half:first-child{ border-right:1px solid rgba(60,64,68,0.6); box-shadow:1px 0 0 rgba(255,255,255,0.5); }
  .piece.skin-prata.v .half:first-child{ border-bottom:1px solid rgba(60,64,68,0.6); box-shadow:0 1px 0 rgba(255,255,255,0.5); }
  .piece.skin-prata.double .half:first-child{border:none; box-shadow:none;}

.piece.skin-ouro{
    background:
      linear-gradient(122deg, transparent 0%, rgba(255,250,220,0.9) 9%, transparent 18%, transparent 38%, rgba(255,250,220,0.5) 46%, transparent 55%, transparent 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.16) 0px, rgba(255,255,255,0.16) 1px, transparent 2px, transparent 4px),
      linear-gradient(155deg, #f8de8a 0%, #d9ad3c 40%, #a97a1a 72%, #6b4a0c 100%);
    border:1px solid rgba(70,48,8,0.65);
    box-shadow:
      inset 0 1px 1px rgba(255,250,220,0.75),
      inset 0 -2px 3px rgba(60,40,5,0.45),
      0 3px 0 rgba(110,76,15,0.6),
      0 6px 10px rgba(0,0,0,0.55);
  }
  .piece.skin-ouro.h .half:first-child{ border-right:1px solid rgba(70,48,8,0.65); box-shadow:1px 0 0 rgba(255,250,220,0.4); }
  .piece.skin-ouro.v .half:first-child{ border-bottom:1px solid rgba(70,48,8,0.65); box-shadow:0 1px 0 rgba(255,250,220,0.4); }
  .piece.skin-ouro.double .half:first-child{border:none; box-shadow:none;}

/* pip grid positions using nth-child via data-n handled in JS by class names p0..p8 */
  .p1{grid-column:2;grid-row:2;}
  .p2a{grid-column:1;grid-row:1;} .p2b{grid-column:3;grid-row:3;}
  .p3a{grid-column:1;grid-row:1;} .p3b{grid-column:2;grid-row:2;} .p3c{grid-column:3;grid-row:3;}
  .p4a{grid-column:1;grid-row:1;} .p4b{grid-column:3;grid-row:1;} .p4c{grid-column:1;grid-row:3;} .p4d{grid-column:3;grid-row:3;}
  .p5a{grid-column:1;grid-row:1;} .p5b{grid-column:3;grid-row:1;} .p5c{grid-column:2;grid-row:2;} .p5d{grid-column:1;grid-row:3;} .p5e{grid-column:3;grid-row:3;}
  .p6a{grid-column:1;grid-row:1;} .p6b{grid-column:1;grid-row:2;} .p6c{grid-column:1;grid-row:3;} .p6d{grid-column:3;grid-row:1;} .p6e{grid-column:3;grid-row:2;} .p6f{grid-column:3;grid-row:3;}

.end-glow{
    position:absolute;
    inset:-4px;
    border-radius:9px;
    pointer-events:none;
    box-shadow:0 0 0 2px var(--brass-soft), 0 0 14px var(--brass-soft);
    opacity:0;
    transition:opacity .2s;
  }
  .piece.playable-end .end-glow{opacity:1;}
  .piece.playable-end{cursor:pointer;}

/* ---------- Player hand (bottom) ---------- */
  .player-zone{
    position:relative;
    padding:16px 16px 20px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:10px;
    z-index:5;
  }
  .rail-line{
    width:min(94%,900px);
    height:1px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  }
  .hand{
    display:flex;
    flex-wrap:nowrap;
    gap:10px 8px;
    justify-content:center;
    min-height:96px;
    align-items:flex-end;
    max-width:100%;
    padding:34px 6px 8px;
    overflow-x:auto;
    overflow-y:hidden;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .hand::-webkit-scrollbar{ display:none; }
  .h-piece{
    width:44px;
    height:88px;
    flex-shrink:0;
    background:
      radial-gradient(circle at 22% 10%, rgba(255,255,255,0.65), transparent 40%),
      linear-gradient(155deg, var(--ivory-hi), var(--ivory) 55%, #ddd0af);
    border-radius:8px;
    border:1px solid rgba(45,28,10,0.4);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -2px 2px rgba(120,95,55,0.16),
      0 4px 0 rgba(160,132,84,0.55),
      0 8px 12px rgba(0,0,0,0.45);
    display:flex;
    flex-direction:column;
    cursor:grab;
    transition:transform .15s ease, box-shadow .15s ease, opacity .15s ease, filter .15s ease;
    position:relative;
    touch-action:none;
    user-select:none;
  }
  .h-piece:hover{
    transform:translateY(-10px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -2px 2px rgba(120,95,55,0.16),
      0 4px 0 rgba(160,132,84,0.55),
      0 20px 22px rgba(0,0,0,0.55);
    z-index:2;
  }
  .h-piece.selected{
    transform:translateY(-20px);
    box-shadow:
      0 0 0 3px var(--brass-soft),
      inset 0 1px 0 rgba(255,255,255,0.65),
      0 4px 0 rgba(160,132,84,0.55),
      0 20px 22px rgba(0,0,0,0.55);
    z-index:3;
  }
  .h-piece.playable{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -2px 2px rgba(120,95,55,0.16),
      0 4px 0 rgba(160,132,84,0.55),
      0 8px 12px rgba(0,0,0,0.45),
      0 0 0 2px rgba(228,199,102,0.55),
      0 0 12px rgba(228,199,102,0.35);
  }
  .h-piece.playable:hover{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      0 4px 0 rgba(160,132,84,0.55),
      0 20px 22px rgba(0,0,0,0.55),
      0 0 0 2px rgba(228,199,102,0.7),
      0 0 14px rgba(228,199,102,0.45);
  }
  .h-piece.dim{ opacity:0.78; filter:saturate(0.75) brightness(0.93); cursor:default; }
  .h-piece.dim:hover{
    transform:none;
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.65),
      inset 0 -2px 2px rgba(120,95,55,0.16),
      0 4px 0 rgba(160,132,84,0.55),
      0 8px 12px rgba(0,0,0,0.45);
  }
  .h-piece.dragging-source{ opacity:0.28; }
  .drag-ghost{
    position:fixed;
    pointer-events:none;
    z-index:100;
    box-shadow:0 22px 34px rgba(0,0,0,0.55), 0 0 0 2px rgba(228,199,102,0.6);
    transition:none !important;
    will-change:transform;
  }
  .piece.drop-hover{
    box-shadow:0 0 0 3px var(--brass-soft), 0 0 22px var(--brass-soft), 0 3px 6px rgba(0,0,0,0.45) !important;
  }
  .board-zone.drop-hover{
    background:radial-gradient(circle, rgba(201,162,39,0.14), transparent 70%);
  }

.deal-layer{
    position:fixed;
    inset:0;
    pointer-events:none;
    z-index:45;
    overflow:visible;
  }
  .fly-tile{
    position:fixed;
    width:30px;
    height:42px;
    border-radius:5px;
    background:
      radial-gradient(circle at 28% 16%, rgba(255,255,255,0.75), transparent 45%),
      linear-gradient(155deg, var(--ivory-hi), var(--ivory) 55%, #ddd0af);
    border:1px solid rgba(45,28,10,0.4);
    box-shadow:
      inset 0 0 0 3px rgba(201,162,39,0.3),
      inset 0 1px 0 rgba(255,255,255,0.65),
      0 4px 0 rgba(160,132,84,0.55),
      0 8px 14px rgba(0,0,0,0.4);
    transform:translate(0,0) rotate(0deg);
    transition:transform .26s cubic-bezier(.22,.68,.32,1.05);
    will-change:transform;
  }

@keyframes tileLand{
    from{ transform:translateY(-14px) scale(0.82); opacity:0.35; }
    to{ transform:translateY(0) scale(1); opacity:1; }
  }
  .h-piece.landing{ animation:tileLand .2s ease-out; }
  .ai-tile.landing{ animation:tileLand .2s ease-out; }
  .piece.landing{ animation:tileLand .22s ease-out; }
  .h-piece .half{
    flex:1;
    display:grid;
    grid-template-columns:repeat(3,1fr);
    grid-template-rows:repeat(3,1fr);
    place-items:center;
    padding:4px 5px;
  }
  .h-piece .half:first-child{
    border-bottom:2px solid rgba(30,18,6,0.55);
    box-shadow:0 2px 0 rgba(255,255,255,0.55);
  }
  .h-piece .pip{width:8px;height:8px;}
  .h-piece.skin-black{
    background:
      radial-gradient(circle at 22% 10%, rgba(255,255,255,0.12), transparent 40%),
      linear-gradient(155deg, #2c2c2c, #161616 55%, #050505);
    border:1px solid rgba(0,0,0,0.6);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -2px 2px rgba(0,0,0,0.5),
      0 4px 0 rgba(0,0,0,0.65),
      0 8px 12px rgba(0,0,0,0.45);
  }
  .h-piece.skin-black .half:first-child{ border-bottom:2px solid rgba(0,0,0,0.75); box-shadow:0 2px 0 rgba(255,255,255,0.1); }
  .h-piece.skin-black.playable{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.12),
      inset 0 -2px 2px rgba(0,0,0,0.5),
      0 4px 0 rgba(0,0,0,0.65),
      0 8px 12px rgba(0,0,0,0.45),
      0 0 0 2px rgba(228,199,102,0.55),
      0 0 12px rgba(228,199,102,0.35);
  }
  .h-piece.skin-yellow{
    background:
      radial-gradient(circle at 22% 10%, rgba(255,255,255,0.5), transparent 40%),
      linear-gradient(155deg, #fde388, #f2c230 55%, #d1a11c);
    border:1px solid rgba(90,65,10,0.5);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -2px 2px rgba(120,85,10,0.2),
      0 4px 0 rgba(150,110,15,0.55),
      0 8px 12px rgba(0,0,0,0.4);
  }
  .h-piece.skin-yellow .half:first-child{ border-bottom:2px solid rgba(90,65,10,0.5); box-shadow:0 2px 0 rgba(255,255,255,0.4); }
  .h-piece.skin-yellow.playable{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,0.5),
      inset 0 -2px 2px rgba(120,85,10,0.2),
      0 4px 0 rgba(150,110,15,0.55),
      0 8px 12px rgba(0,0,0,0.4),
      0 0 0 2px rgba(228,199,102,0.55),
      0 0 12px rgba(228,199,102,0.35);
  }
  .h-piece.skin-madeira{
    background:
      radial-gradient(ellipse 5px 4px at 74% 20%, rgba(20,10,4,0.55) 0%, rgba(20,10,4,0.55) 60%, transparent 70%),
      radial-gradient(ellipse 9px 7px at 74% 20%, transparent 58%, rgba(90,55,25,0.35) 66%, transparent 76%),
      repeating-linear-gradient(88deg, rgba(0,0,0,0.16) 0px, rgba(0,0,0,0.16) 1px, transparent 2px, transparent 5px),
      repeating-linear-gradient(91deg, rgba(255,214,170,0.07) 0px, transparent 1px, transparent 6px),
      linear-gradient(100deg, rgba(255,255,255,0.14) 0%, transparent 24%),
      linear-gradient(155deg, #a9723f, #7a4b26 55%, #4a2c15);
    border:1px solid rgba(35,20,8,0.6);
    box-shadow:
      inset 0 1px 0 rgba(255,214,170,0.25),
      inset 0 -2px 2px rgba(35,20,8,0.35),
      0 4px 0 rgba(60,36,18,0.6),
      0 8px 12px rgba(0,0,0,0.45);
  }
  .h-piece.skin-madeira .half:first-child{ border-bottom:2px solid rgba(35,20,8,0.6); box-shadow:0 2px 0 rgba(255,214,170,0.2); }
  .h-piece.skin-madeira.playable{
    box-shadow:
      inset 0 1px 0 rgba(255,214,170,0.25),
      inset 0 -2px 2px rgba(35,20,8,0.35),
      0 4px 0 rgba(60,36,18,0.6),
      0 8px 12px rgba(0,0,0,0.45),
      0 0 0 2px rgba(228,199,102,0.55),
      0 0 12px rgba(228,199,102,0.35);
  }

.h-piece.skin-bronze{
    background:
      linear-gradient(122deg, transparent 0%, rgba(255,238,210,0.75) 9%, transparent 18%, transparent 38%, rgba(255,238,210,0.4) 46%, transparent 55%, transparent 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.14) 0px, rgba(255,255,255,0.14) 1px, transparent 2px, transparent 4px),
      linear-gradient(155deg, #e0a868 0%, #ad6f30 45%, #7a4a1c 75%, #4a2b0f 100%);
    border:1px solid rgba(50,28,10,0.7);
    box-shadow:
      inset 0 1px 1px rgba(255,240,210,0.6),
      inset 0 -2px 3px rgba(40,20,5,0.5),
      0 4px 0 rgba(60,34,12,0.65),
      0 8px 12px rgba(0,0,0,0.5);
  }
  .h-piece.skin-bronze .half:first-child{ border-bottom:2px solid rgba(50,28,10,0.7); box-shadow:0 2px 0 rgba(255,240,210,0.3); }
  .h-piece.skin-bronze.playable{
    box-shadow:
      inset 0 1px 1px rgba(255,240,210,0.6),
      inset 0 -2px 3px rgba(40,20,5,0.5),
      0 4px 0 rgba(60,34,12,0.65),
      0 8px 12px rgba(0,0,0,0.5),
      0 0 0 2px rgba(228,199,102,0.55),
      0 0 12px rgba(228,199,102,0.35);
  }

.h-piece.skin-prata{
    background:
      linear-gradient(122deg, transparent 0%, rgba(255,255,255,0.9) 9%, transparent 18%, transparent 38%, rgba(255,255,255,0.55) 46%, transparent 55%, transparent 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.18) 0px, rgba(255,255,255,0.18) 1px, transparent 2px, transparent 4px),
      linear-gradient(155deg, #f1f4f6 0%, #c6cdd3 40%, #8b939a 72%, #565c62 100%);
    border:1px solid rgba(60,64,68,0.6);
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.85),
      inset 0 -2px 3px rgba(40,44,48,0.4),
      0 4px 0 rgba(90,96,102,0.6),
      0 8px 12px rgba(0,0,0,0.45);
  }
  .h-piece.skin-prata .half:first-child{ border-bottom:2px solid rgba(60,64,68,0.6); box-shadow:0 2px 0 rgba(255,255,255,0.45); }
  .h-piece.skin-prata.playable{
    box-shadow:
      inset 0 1px 1px rgba(255,255,255,0.85),
      inset 0 -2px 3px rgba(40,44,48,0.4),
      0 4px 0 rgba(90,96,102,0.6),
      0 8px 12px rgba(0,0,0,0.45),
      0 0 0 2px rgba(228,199,102,0.55),
      0 0 12px rgba(228,199,102,0.35);
  }

.h-piece.skin-ouro{
    background:
      linear-gradient(122deg, transparent 0%, rgba(255,250,220,0.9) 9%, transparent 18%, transparent 38%, rgba(255,250,220,0.5) 46%, transparent 55%, transparent 100%),
      repeating-linear-gradient(115deg, rgba(255,255,255,0.16) 0px, rgba(255,255,255,0.16) 1px, transparent 2px, transparent 4px),
      linear-gradient(155deg, #f8de8a 0%, #d9ad3c 40%, #a97a1a 72%, #6b4a0c 100%);
    border:1px solid rgba(70,48,8,0.65);
    box-shadow:
      inset 0 1px 1px rgba(255,250,220,0.75),
      inset 0 -2px 3px rgba(60,40,5,0.45),
      0 4px 0 rgba(110,76,15,0.6),
      0 8px 12px rgba(0,0,0,0.5);
  }
  .h-piece.skin-ouro .half:first-child{ border-bottom:2px solid rgba(70,48,8,0.65); box-shadow:0 2px 0 rgba(255,250,220,0.35); }
  .h-piece.skin-ouro.playable{
    box-shadow:
      inset 0 1px 1px rgba(255,250,220,0.75),
      inset 0 -2px 3px rgba(60,40,5,0.45),
      0 4px 0 rgba(110,76,15,0.6),
      0 8px 12px rgba(0,0,0,0.5),
      0 0 0 2px rgba(228,199,102,0.55),
      0 0 12px rgba(228,199,102,0.35);
  }

.controls{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    align-items:center;
    justify-content:center;
    max-width:100%;
  }
  .btn{
    font-family:'Inter',sans-serif;
    font-weight:600;
    font-size:0.82rem;
    letter-spacing:0.02em;
    padding:9px 18px;
    border-radius:999px;
    border:1px solid rgba(255,255,255,0.15);
    background:rgba(0,0,0,0.25);
    color:var(--ivory);
    cursor:pointer;
    transition:background .15s, transform .1s;
  }
  .btn:hover{background:rgba(0,0,0,0.4);}
  .btn:active{transform:scale(0.97);}
  .btn.primary{
    background:linear-gradient(160deg, var(--brass-soft), var(--brass));
    color:#2a2005;
    border:none;
  }
  .btn.primary:hover{filter:brightness(1.08);}
  .btn:disabled{opacity:0.35; cursor:not-allowed;}
  .btn.danger{
    background:rgba(122,34,26,0.35);
    border:1px solid rgba(122,34,26,0.7);
    color:#f3ecdd;
  }
  .btn.danger:hover{background:rgba(122,34,26,0.55);}
  .btn.ghost{
    background:transparent;
    border:1px solid rgba(255,255,255,0.15);
  }
  .btn.icon-btn{
    padding:9px 12px;
    font-size:0.9rem;
    line-height:1;
  }
  @media (max-width:720px){ .btn.icon-btn{padding:7px 10px; font-size:0.82rem;} }
  @media (max-width:480px){ .btn.icon-btn{padding:6px 9px; font-size:0.76rem;} }
  .pause-actions{
    display:flex;
    flex-direction:column;
    gap:10px;
    margin-top:4px;
  }

.boneyard{
    position:absolute;
    top:var(--hud-h, 104px);
    right:22px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:6px;
    z-index:4;
    transition:top .15s ease;
  }
  .bone-stack{
    width:34px;
    height:52px;
    border-radius:6px;
    background:
      radial-gradient(circle at 28% 16%, rgba(255,255,255,0.75), transparent 45%),
      linear-gradient(155deg, var(--ivory-hi), var(--ivory) 55%, #ddd0af);
    border:1px solid rgba(45,28,10,0.4);
    box-shadow:
      inset 0 0 0 3px rgba(201,162,39,0.3),
      inset 0 1px 0 rgba(255,255,255,0.65),
      0 4px 8px rgba(0,0,0,0.4);
    position:relative;
  }
  .bone-stack::before,.bone-stack::after{
    content:'';
    position:absolute;
    inset:0;
    border-radius:6px;
    background:inherit;
    box-shadow:inherit;
  }
  .bone-stack::before{ transform:translate(-3px,-3px); z-index:-1; }
  .bone-stack::after{ transform:translate(-6px,-6px); z-index:-2; }
  .bone-count{
    font-size:0.72rem;
    color:rgba(243,236,221,0.7);
    letter-spacing:0.05em;
  }

.toast{
    position:absolute;
    left:50%;
    top:18px;
    transform:translateX(-50%) translateY(-16px);
    background:rgba(10,10,10,0.85);
    border:1px solid rgba(255,255,255,0.14);
    padding:10px 20px;
    border-radius:10px;
    font-family:'Fraunces',serif;
    font-size:0.95rem;
    color:var(--brass-soft);
    opacity:0;
    pointer-events:none;
    transition:opacity .3s, transform .3s;
    z-index:20;
    text-align:center;
    max-width:80%;
  }
  .toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }

.overlay{
    position:absolute;
    inset:0;
    background:rgba(4,10,8,0.72);
    display:flex;
    align-items:center;
    justify-content:center;
    z-index:30;
    opacity:0;
    pointer-events:none;
    transition:opacity .3s;
  }
  .overlay.show{ opacity:1; pointer-events:auto; }
  .overlay-card{
    background:linear-gradient(160deg,#16281f,#0b1b14);
    border:1px solid rgba(201,162,39,0.35);
    border-radius:18px;
    padding:36px 42px;
    text-align:center;
    box-shadow:0 20px 60px rgba(0,0,0,0.6);
    max-width:380px;
  }
  .overlay-card h2{
    font-family:'Fraunces',serif;
    font-size:1.8rem;
    color:var(--brass-soft);
    margin:0 0 8px;
  }
  .overlay-card p{
    font-size:0.9rem;
    color:rgba(243,236,221,0.75);
    margin:0 0 22px;
    line-height:1.5;
  }

@media (max-width:720px){
    .h-piece{width:33px;height:66px;}
    .hand{gap:8px 6px;}
    .h-piece .pip{width:6px;height:6px;}
    .piece.h{width:44px;height:22px;}
    .piece.v{width:22px;height:44px;}
    .piece .half{padding:2.5px;}
    .piece .pip{width:3.4px;height:3.4px;}
    .boneyard{right:10px;}
    .hud{padding:10px 12px 4px;}
    .hud #menuBtn{padding:8px 14px; font-size:0.76rem;}
    .score-pill{padding:6px 12px; font-size:0.8rem;}
    .btn{padding:8px 14px; font-size:0.76rem;}
  }

@media (max-width:380px){
    .score-pill{padding:4px 8px; font-size:0.72rem; gap:5px;}
    .btn{padding:7px 11px; font-size:0.7rem;}
    .h-piece{width:29px;height:58px;}
    .hand{gap:7px 5px;}
  }

@media (prefers-reduced-motion: reduce){
    *{transition:none !important; animation:none !important;}
  }

<div class="hud">
      <div class="score-pill"><span class="dot" id="dotAI"></span><span id="opponentLabel">Máquina</span> <span class="diff-tag" id="diffTag">médio</span> <b id="scoreAI">0</b></div>
      <div class="score-pill"><span class="dot" id="dotYou"></span>Você <b id="scoreYou">0</b></div>
      <div class="score-pill" id="betTag" style="display:none;">🎲 <b id="betAmountLabel">R$0</b> · Partida <span id="roundLabel">1</span>/3</div>
      <div class="score-pill" id="tourneyTag" style="display:none;cursor:pointer;" title="Ver chaveamento">🏆 <span id="tourneyRoundLabel">Final</span> · <b id="tourneyPrizeLabel">R$0</b></div>
      <button class="btn icon-btn" id="soundBtn" title="Ativar/desativar som">🔊</button>
      <button class="btn" id="menuBtn">▶ Start</button>
    </div>

<div class="board-zone">
      <div class="board-scroll" id="boardScroll">
        <div class="chain" id="chain">
          <div class="placeholder-msg" id="placeholderMsg">A mesa está vazia — jogue a peça mais alta para começar</div>
        </div>
      </div>
    </div>

<div class="player-zone">
      <div class="rail-line"></div>
      <div class="hand" id="hand"></div>
      <div class="rail-line"></div>
      <div class="controls">
        <button class="btn" id="drawBtn">Comprar peça</button>
        <button class="btn" id="passBtn">Passar vez</button>
      </div>
    </div>

<div class="overlay" id="overlay">
      <div class="overlay-card">
        <h2 id="overlayTitle">Fim de jogo</h2>
        <p id="overlayText"></p>
        <div class="pause-actions">
          <button class="btn primary" id="overlayBtn">Jogar novamente</button>
          <button class="btn ghost" id="overlayMenuBtn">Voltar ao menu principal</button>
        </div>
      </div>
    </div>

<div class="overlay" id="pauseOverlay">
      <div class="overlay-card">
        <h2>Partida pausada</h2>
        <p>Deseja continuar a partida ou abandonar? Abandonar conta como derrota por W.O.</p>
        <div class="pause-actions">
          <button class="btn primary" id="continueBtn">Continuar partida</button>
          <button class="btn danger" id="abandonBtn">Abandonar partida (W.O.)</button>
        </div>
      </div>
    </div>

<div class="overlay" id="bracketOverlay">
      <div class="overlay-card" style="max-width:340px;">
        <h2 style="font-size:1.4rem;">🏆 Chaveamento</h2>
        <p id="bracketSubtitle" style="margin-bottom:14px;"></p>
        <div id="bracketList" style="display:flex;flex-direction:column;gap:8px;margin-bottom:22px;text-align:left;"></div>
        <button class="btn primary" id="bracketCloseBtn">Fechar</button>
      </div>
    </div>

</div>
</div>

// ---------- state ----------
  let deck, playerHand, aiHand, boneyard, chain, leftEnd, rightEnd;
  let turn; // 'you' | 'ai'
  let selectedIdx = null;
  let scores = {you:0, ai:0};
  let gameOver = false;
  let passStreak = 0; // consecutive passes to detect blocked game
  let isDealing = false;
  let dealCountYou = 0;
  let dealCountAI = 0;
  let dragState = null;
  let lastPlacedSide = null;
  // Escolhida no menu, antes da partida começar (não muda durante o jogo).
  let aiDifficulty = '__AI_DIFFICULTY__'; // 'facil' | 'medio' | 'dificil'
  if(['facil','medio','dificil'].indexOf(aiDifficulty) === -1){
    // fallback: página aberta sozinha, sem o menu (ex.: ?dificuldade=facil na URL)
    const params = new URLSearchParams(window.location.search);
    const fromUrl = params.get('dificuldade');
    aiDifficulty = ['facil','medio','dificil'].indexOf(fromUrl) !== -1 ? fromUrl : 'medio';
  }

// ---------- Sons (sintetizados via Web Audio API — clacks reais de pedras de dominó) ----------
  const SOM_MUTADO_KEY = 'domino_origens_som_mutado';
  const Sound = (function(){
    let ctx = null;
    let master = null;
    let muted = false;
    try{ muted = localStorage.getItem(SOM_MUTADO_KEY) === '1'; }catch(e){}

function noiseBuffer(durationSec, shapePow){
      const c = ensureCtx();
      const n = Math.max(1, Math.floor(c.sampleRate * durationSec));
      const buf = c.createBuffer(1, n, c.sampleRate);
      const data = buf.getChannelData(0);
      for(let i=0;i<n;i++){
        const env = Math.pow(1 - i/n, shapePow);
        data[i] = (Math.random()*2 - 1) * env;
      }
      return buf;
    }

// Peça de dominó batendo na mesa: transiente curto de "clique" (madeira/plástico)
    // + um "corpo" grave curto que dá peso à pancada.
    function clack(opts){
      if(muted) return;
      const c = ensureCtx();
      if(!c) return;
      opts = opts || {};
      const strength = opts.strength || 1;
      const t = c.currentTime;

const noise = c.createBufferSource();
      noise.buffer = noiseBuffer(0.045, 2.2);
      const bp = c.createBiquadFilter();
      bp.type = 'bandpass';
      bp.frequency.value = 2200 + Math.random()*1400;
      bp.Q.value = 1.1;
      const noiseGain = c.createGain();
      noiseGain.gain.setValueAtTime(0.5 * strength, t);
      noiseGain.gain.exponentialRampToValueAtTime(0.001, t + 0.05);
      noise.connect(bp).connect(noiseGain).connect(master);
      noise.start(t);
      noise.stop(t + 0.06);

const osc = c.createOscillator();
      osc.type = 'triangle';
      const baseFreq = 150 + Math.random()*50;
      osc.frequency.setValueAtTime(baseFreq, t);
      osc.frequency.exponentialRampToValueAtTime(baseFreq*0.5, t + 0.09);
      const oscGain = c.createGain();
      oscGain.gain.setValueAtTime(0.32 * strength, t);
      oscGain.gain.exponentialRampToValueAtTime(0.001, t + 0.13);
      osc.connect(oscGain).connect(master);
      osc.start(t);
      osc.stop(t + 0.14);
    }

// Peça dobrada / jogada de destaque: pancada um pouco mais forte e mais grave.
    function clackHeavy(){ clack({strength:1.35}); }

// Comprar peça no monte: arraste/deslize seco e curto.
    function drawSound(){
      if(muted) return;
      const c = ensureCtx();
      if(!c) return;
      const t = c.currentTime;
      const noise = c.createBufferSource();
      noise.buffer = noiseBuffer(0.11, 1.4);
      const bp = c.createBiquadFilter();
      bp.type = 'bandpass';
      bp.frequency.setValueAtTime(1200, t);
      bp.frequency.exponentialRampToValueAtTime(2600, t + 0.1);
      bp.Q.value = 0.7;
      const g = c.createGain();
      g.gain.setValueAtTime(0.22, t);
      g.gain.exponentialRampToValueAtTime(0.001, t + 0.12);
      noise.connect(bp).connect(g).connect(master);
      noise.start(t);
      noise.stop(t + 0.13);
    }

// Embaralhar as pedras no início da partida: várias pancadas curtas e rápidas,
    // como pedras sendo misturadas na mesa antes de virar o monte.
    function shuffleSound(){
      if(muted) return;
      ensureCtx();
      const hits = 14 + Math.floor(Math.random()*6);
      for(let i=0;i<hits;i++){
        setTimeout(()=>{ clack({strength: 0.35 + Math.random()*0.35}); }, i * (28 + Math.random()*22));
      }
    }

function setMuted(v){
      muted = !!v;
      try{ localStorage.setItem(SOM_MUTADO_KEY, muted ? '1' : '0'); }catch(e){}
    }
    function isMuted(){ return muted; }

return { clack, clackHeavy, drawSound, shuffleSound, setMuted, isMuted, unlock };
  })();

// ---------- Modo Aposta (melhor de 3, empate joga desempate) ----------
  const SALDO_KEY = 'domino_origens_saldo';
  const SALDO_INICIAL = 500;
  function loadSaldo(){
    const raw = localStorage.getItem(SALDO_KEY);
    if(raw === null){ localStorage.setItem(SALDO_KEY, String(SALDO_INICIAL)); return SALDO_INICIAL; }
    const n = parseInt(raw, 10);
    return isNaN(n) ? SALDO_INICIAL : n;
  }
  function saveSaldo(v){
    try{ localStorage.setItem(SALDO_KEY, String(Math.max(0, Math.round(v)))); }catch(e){}
  }
  function formatMoney(v){ return 'R$ ' + Number(v).toLocaleString('pt-BR'); }
  checkMoneyAchievements(loadSaldo());

// ---------- Pedra (skin) ativa, escolhida na loja do menu ----------
  const TILE_SKINS = [
    {id:'classica', tileBg:'ivory', pipColors:null},
    {id:'perola', tileBg:'black', pipColors:{1:'#f4f1ea', 2:'#f4f1ea', 3:'#f4f1ea', 4:'#f4f1ea', 5:'#f4f1ea', 6:'#f4f1ea'}},
    {id:'colorida', tileBg:'black', pipColors:{1:'#f2f0e8', 2:'#3f8fd1', 3:'#4fa84f', 4:'#c1382b', 5:'#e3b400', 6:'#e2792e'}},
    {id:'madeira', tileBg:'madeira', pipColors:null},
    {id:'brazukas', tileBg:'yellow', pipColors:{1:'#2f8f3f', 2:'#2f8f3f', 3:'#2f8f3f', 4:'#2f8f3f', 5:'#2f8f3f', 6:'#2f8f3f'}},
    {id:'bronze', tileBg:'bronze', pipColors:null},
    {id:'prata', tileBg:'prata', pipColors:null},
    {id:'ouro', tileBg:'ouro', pipColors:null}
  ];
  const SKIN_SELECTED_KEY = 'domino_origens_pedra_selecionada';
  function loadActiveSkin(){
    let id = 'classica';
    try{ id = localStorage.getItem(SKIN_SELECTED_KEY) || 'classica'; }catch(e){}
    return TILE_SKINS.find(s=>s.id===id) || TILE_SKINS[0];
  }
  const activeSkin = loadActiveSkin();
  function shadeColor(hex, percent){
    const n = parseInt(hex.slice(1), 16);
    let r = (n >> 16) + Math.round(255 * percent);
    let g = ((n >> 8) & 0xff) + Math.round(255 * percent);
    let b = (n & 0xff) + Math.round(255 * percent);
    r = Math.max(0, Math.min(255, r)); g = Math.max(0, Math.min(255, g)); b = Math.max(0, Math.min(255, b));
    return '#' + (r<<16 | g<<8 | b).toString(16).padStart(6,'0');
  }

// ---------- Medalhas do torneio (ouro/prata/bronze, contagem persistente) ----------
  const MEDALS_KEY = 'domino_origens_medalhas';
  function loadMedals(){
    try{
      const raw = localStorage.getItem(MEDALS_KEY);
      const m = raw ? JSON.parse(raw) : {};
      return { ouro: m.ouro||0, prata: m.prata||0, bronze: m.bronze||0 };
    }catch(e){ return {ouro:0, prata:0, bronze:0}; }
  }
  function awardMedal(tipo){
    const medals = loadMedals();
    const wasFirst = !medals[tipo];
    medals[tipo] = (medals[tipo]||0) + 1;
    try{ localStorage.setItem(MEDALS_KEY, JSON.stringify(medals)); }catch(e){}
    if(wasFirst){
      if(tipo==='ouro') unlockAchievement('primeira_ouro');
      else if(tipo==='prata') unlockAchievement('primeira_prata');
      else if(tipo==='bronze') unlockAchievement('primeira_bronze');
    }
  }

// ---------- Conquistas ----------
  const ACH_KEY = 'domino_origens_conquistas';
  const STATS_KEY = 'domino_origens_stats';
  const WIN_MILESTONES = [10,50,100,200,300,400,500,600,700,800,900];
  const TOURNEY_ROUND_BONUS = 100; // creditado a cada partida vencida dentro do torneio
  const ACHIEVEMENT_DEFS = [
    {id:'primeira_vitoria', icon:'🎉', title:'Primeira partida vencida'},
    {id:'campeao_4', icon:'🏆', title:'Campeão do torneio com 4 jogadores'},
    {id:'campeao_8', icon:'🏆', title:'Campeão do torneio com 8 jogadores'},
    {id:'campeao_16', icon:'🏆', title:'Campeão do torneio com 16 jogadores'},
    {id:'campeao_32', icon:'🏆', title:'Campeão do torneio com 32 jogadores'},
    {id:'primeira_ouro', icon:'🥇', title:'Primeira medalha de ouro'},
    {id:'primeira_prata', icon:'🥈', title:'Primeira medalha de prata'},
    {id:'primeira_bronze', icon:'🥉', title:'Primeira medalha de bronze'},
    {id:'ficando_rico', icon:'💰', title:'Ficando rico'},
    {id:'milionario', icon:'💎', title:'Ficando milionário'},
  ].concat(WIN_MILESTONES.map(function(m){
    return {id:'vitorias_'+m, icon:'🎖️', title:'Ganhou ' + m + ' partidas'};
  })).concat([
    {id:'lenda_dominio', icon:'👑', title:'Lenda do dominó'},
    {id:'jogador_raiz', icon:'🌳', title:'Jogador raiz'},
    {id:'venceu_facil', icon:'🟢', title:'Venceu no nível fácil'},
    {id:'venceu_medio', icon:'🟡', title:'Venceu no nível médio'},
    {id:'venceu_dificil', icon:'🔴', title:'Venceu no nível difícil'}
  ]);
  function loadAchievements(){
    try{
      const raw = localStorage.getItem(ACH_KEY);
      const obj = raw ? JSON.parse(raw) : {};
      return (obj && typeof obj === 'object') ? obj : {};
    }catch(e){ return {}; }
  }
  function unlockAchievement(id){
    const ach = loadAchievements();
    if(ach[id]) return false;
    ach[id] = Date.now();
    try{ localStorage.setItem(ACH_KEY, JSON.stringify(ach)); }catch(e){}
    showAchievementToast(id);
    return true;
  }
  function showAchievementToast(id){
    const def = ACHIEVEMENT_DEFS.find(function(d){ return d.id === id; });
    if(!def) return;
    const container = document.getElementById('achToastContainer');
    if(!container) return;
    const el = document.createElement('div');
    el.className = 'ach-toast';
    const icon = document.createElement('span');
    icon.className = 'ach-toast-icon';
    icon.textContent = def.icon;
    const body = document.createElement('span');
    body.className = 'ach-toast-body';
    const label = document.createElement('span');
    label.className = 'ach-toast-label';
    label.textContent = 'Conquista desbloqueada';
    const title = document.createElement('span');
    title.className = 'ach-toast-title';
    title.textContent = def.title;
    body.appendChild(label);
    body.appendChild(title);
    el.appendChild(icon);
    el.appendChild(body);
    container.appendChild(el);
    requestAnimationFrame(function(){
      requestAnimationFrame(function(){ el.classList.add('show'); });
    });
    setTimeout(function(){
      el.classList.remove('show');
      setTimeout(function(){ el.remove(); }, 400);
    }, 3800);
  }
  function loadStats(){
    try{
      const raw = localStorage.getItem(STATS_KEY);
      const s = raw ? JSON.parse(raw) : {};
      return { gamesPlayed: s.gamesPlayed||0, gamesWon: s.gamesWon||0 };
    }catch(e){ return {gamesPlayed:0, gamesWon:0}; }
  }
  function saveStats(s){
    try{ localStorage.setItem(STATS_KEY, JSON.stringify(s)); }catch(e){}
  }
  function checkMoneyAchievements(saldo){
    if(saldo >= 100000) unlockAchievement('ficando_rico');
    if(saldo >= 1000000) unlockAchievement('milionario');
  }
  function recordGamePlayed(){
    const s = loadStats();
    s.gamesPlayed += 1;
    if(s.gamesPlayed >= 1000) unlockAchievement('jogador_raiz');
    saveStats(s);
  }
  function recordGameWon(difficulty){
    const s = loadStats();
    s.gamesWon += 1;
    if(s.gamesWon === 1) unlockAchievement('primeira_vitoria');
    WIN_MILESTONES.forEach(function(m){ if(s.gamesWon === m) unlockAchievement('vitorias_' + m); });
    if(s.gamesWon >= 1000) unlockAchievement('lenda_dominio');
    if(difficulty === 'facil') unlockAchievement('venceu_facil');
    else if(difficulty === 'medio') unlockAchievement('venceu_medio');
    else if(difficulty === 'dificil') unlockAchievement('venceu_dificil');
    saveStats(s);
  }

let betAmount = parseInt('__BET_AMOUNT__', 10);
  if(isNaN(betAmount) || betAmount < 0){
    const params = new URLSearchParams(window.location.search);
    const fromUrl = parseInt(params.get('aposta'), 10);
    betAmount = isNaN(fromUrl) ? 0 : fromUrl;
  }
  const MATCH_TOTAL_ROUNDS = 3;
  let matchRound = 1;       // partida atual dentro da melhor-de-3
  let inTieBreak = false;   // já entrou na partida extra de desempate
  let matchWinsYou = 0;     // quantas das partidas da melhor-de-3 você já venceu
  let matchWinsAI = 0;      // quantas das partidas da melhor-de-3 o adversário já venceu
  let matchFinished = false; // aposta já foi resolvida (paga/perdida)

// ---------- Modo Torneio (eliminação simples, partida única por fase) ----------
  const TOURNEY_NAME_POOL = [
    'João','José','Pedro','Danilo','Nunes','Pereira','Victor','Henrique','Marques','Carlos',
    'Gabriel','Josué','John','Márcio','Jardiel','Dorival','Felipe','Higor','Ícaro','Alexandre',
    'Abel','Beto','Roberto','Tadeu','Antônio','Joaquim','Francisco','Chico','Artur','Miguel',
    'Luiz','Paulo','Gustavo','Guilherme','Davi','Bernardo','Gilvan','Gilvanildo','Isac','Benjamin',
    'Matheus','Lucas','Nicolas','Jair','Rafael','Murilo','Vicente','Leandro','Leonardo','Emanuel',
    'Eduardo','Edu','Caio','Caíque','Enzo','Augusto','David','Robson','Romário','Ronaldo',
    'Luan','Raul','Breno','Bruno','Cauã','Kawan','Raimundo','Uelton','Nivaldo','William',
    'Uilton','Salvador','Juarez','Juraci','Neto','Júnior','Júlio','Fernando','Xavier','Ana',
    'Maria','Vitória','Karina','Francisca','Franciele','Gabriela','Janaína','Érica','Fernanda','Raissa',
    'Zélia','Isa','Júlia','Raiane','Tatiane','Tatiana','Bárbara','Lúcia','Kaylane','Anita',
    'Eduarda','Carol','Mariana','Raimunda','Cecília','Helena','Juliana','Adriana','Patrícia','Alice',
    'Laura','Isabel','Isabela','Isabelle','Joana','Mônica','Jaciara','Cintia','Taynara','Giovanna',
    'Ângela','Angélica','Débora','Beatriz','Brena','Brenda','Cassia','Fabiano','Giovanni','Hélio',
    'Ivete','Hugo','Ismael','Jefferson','Marcos','Régis','Renan','Stefany','Valdecir','Valquíria','Yuri','Morgana'
  ];
  const TOURNEY_NAMES_KEY = 'domino_origens_nomes_extra';
  function loadCustomNames(){
    try{
      const raw = localStorage.getItem(TOURNEY_NAMES_KEY);
      const arr = raw ? JSON.parse(raw) : [];
      return Array.isArray(arr) ? arr : [];
    }catch(e){ return []; }
  }
  function fullNamePool(){
    const custom = loadCustomNames();
    const seen = {};
    return TOURNEY_NAME_POOL.concat(custom).filter(function(n){
      const key = n.trim().toLowerCase();
      if(!key || seen[key]) return false;
      seen[key] = true;
      return true;
    });
  }
  function pickRandomNames(count){
    const pool = fullNamePool().slice();
    for(let i = pool.length - 1; i > 0; i--){
      const j = Math.floor(Math.random() * (i + 1));
      const tmp = pool[i]; pool[i] = pool[j]; pool[j] = tmp;
    }
    return pool.slice(0, count);
  }

const pipLayouts = {
    0: [],
    1: ['p1'],
    2: ['p2a','p2b'],
    3: ['p3a','p3b','p3c'],
    4: ['p4a','p4b','p4c','p4d'],
    5: ['p5a','p5b','p5c','p5d','p5e'],
    6: ['p6a','p6b','p6c','p6d','p6e','p6f']
  };

function buildDeck(){
    const d = [];
    for(let i=0;i<=6;i++){
      for(let j=i;j<=6;j++){
        d.push([i,j]);
      }
    }
    return d;
  }

function shuffle(arr){
    for(let i=arr.length-1;i>0;i--){
      const j = Math.floor(Math.random()*(i+1));
      [arr[i],arr[j]] = [arr[j],arr[i]];
    }
    return arr;
  }

// ---------- init ----------
  function newGame(){
    document.getElementById('diffTag').textContent = diffLabel(aiDifficulty);
    document.getElementById('opponentLabel').textContent = currentOpponentDisplayName() || 'Máquina';
    Sound.shuffleSound();
    deck = shuffle(buildDeck());
    playerHand = deck.splice(0,7);
    aiHand = deck.splice(0,7);
    boneyard = deck;
    chain = []; // array of {tile:[a,b], orient:'h'/'v', flip:bool} in placement order
    leftEnd = null;
    rightEnd = null;
    selectedIdx = null;
    gameOver = false;
    passStreak = 0;
    dealCountYou = 0;
    dealCountAI = 0;
    isDealing = true;
    dragState = null;

// determine who starts: highest double, else highest sum
    const highestDouble = (hand)=>{
      let best = -1;
      hand.forEach(t=>{ if(t[0]===t[1] && t[0]>best) best = t[0]; });
      return best;
    };
    const pDouble = highestDouble(playerHand);
    const aDouble = highestDouble(aiHand);
    if(pDouble > aDouble) turn = 'you';
    else if(aDouble > pDouble) turn = 'ai';
    else {
      const sum = h => h.reduce((s,t)=>s+t[0]+t[1],0);
      turn = sum(playerHand) >= sum(aiHand) ? 'you' : 'ai';
    }

hideOverlay();
    render();
    runDealAnimation().then(()=>{
      isDealing = false;
      render();
      showToast(turn==='you' ? 'Você começa — jogue a peça mais alta' : (currentOpponentDisplayName() || 'A máquina') + ' começa a partida');
      if(turn==='ai') setTimeout(aiTurn, aiThinkDelay());
    });
  }

function runDealAnimation(){
    return new Promise(resolve=>{
      const dealLayer = document.getElementById('dealLayer');
      const boneRect = document.getElementById('boneStack').getBoundingClientRect();
      const order = [];
      for(let i=0;i<7;i++){ order.push('you','ai'); }
      let i = 0;

// ---------- rendering ----------
  function makePieceEl(tile, orientation, size){
    // size: 'board' or 'hand'
    const [a,b] = tile;
    const isDouble = a===b;
    const wrap = document.createElement('div');
    const skinClassMap = {black:' skin-black', yellow:' skin-yellow', madeira:' skin-madeira', bronze:' skin-bronze', prata:' skin-prata', ouro:' skin-ouro'};
    const skinClass = skinClassMap[activeSkin.tileBg] || '';
    if(size==='hand'){
      wrap.className = 'h-piece' + skinClass;
      wrap.style.flexDirection = 'column';
      wrap.appendChild(pipHalf(a));
      wrap.appendChild(pipHalf(b));
    } else {
      wrap.className = 'piece ' + (orientation==='v' ? 'v' : 'h') + (isDouble?' double':'') + skinClass;
      wrap.appendChild(pipHalf(a));
      wrap.appendChild(pipHalf(b));
      const glow = document.createElement('div');
      glow.className = 'end-glow';
      wrap.appendChild(glow);
    }
    return wrap;
  }

function render(){
    renderHand();
    renderAIRow();
    renderChain();
    renderBoneyard();
    renderScores();
    renderControls();
  }

function adjustBoneyardPosition(){
    // O HUD pode ter 1 ou 2 linhas dependendo de quais tags estão visíveis
    // (aposta/torneio). O monte de peças acompanha a altura real do HUD
    // para nunca ficar por baixo do botão de Start.
    requestAnimationFrame(function(){
      const hud = document.querySelector('.hud');
      const felt = document.querySelector('.felt');
      if(!hud || !felt) return;
      const gap = window.innerWidth <= 720 ? 6 : 10;
      const h = hud.getBoundingClientRect().bottom - felt.getBoundingClientRect().top + gap;
      felt.style.setProperty('--hud-h', h + 'px');
    });
  }
  window.addEventListener('resize', adjustBoneyardPosition);

function renderAIRow(){
    const row = document.getElementById('aiRow');
    row.innerHTML = '';
    const count = isDealing ? dealCountAI : aiHand.length;
    for(let k=0;k<count;k++){
      const t = document.createElement('div');
      t.className = 'ai-tile';
      if(isDealing && k===count-1) t.classList.add('landing');
      row.appendChild(t);
    }
  }

function preferredEndForSelected(){
    if(selectedIdx===null) return 'left';
    const tile = playerHand[selectedIdx];
    if(tile[0]===rightEnd || tile[1]===rightEnd) return 'right';
    return 'left';
  }

function leftEndPlayable(){
    if(selectedIdx===null || turn!=='you') return false;
    const tile = playerHand[selectedIdx];
    return tile[0]===leftEnd || tile[1]===leftEnd;
  }
  function rightEndPlayable(){
    if(selectedIdx===null || turn!=='you') return false;
    const tile = playerHand[selectedIdx];
    return tile[0]===rightEnd || tile[1]===rightEnd;
  }

function renderBoneyard(){
    document.getElementById('boneCount').textContent = boneyard.length;
    document.getElementById('boneStack').style.visibility = boneyard.length>0 ? 'visible':'hidden';
  }

function renderControls(){
    const drawBtn = document.getElementById('drawBtn');
    const passBtn = document.getElementById('passBtn');
    const yourTurn = turn==='you' && !gameOver && !isDealing;
    const hasPlay = playerHand.some(canPlay);
    drawBtn.disabled = !yourTurn || boneyard.length===0 || hasPlay;
    passBtn.disabled = !yourTurn || hasPlay || boneyard.length>0;
  }

// ---------- game logic ----------
  function canPlay(tile){
    if(chain.length===0) return true;
    return tile[0]===leftEnd || tile[1]===leftEnd || tile[0]===rightEnd || tile[1]===rightEnd;
  }

// ---------- drag and drop ----------
  const DRAG_THRESHOLD = 6;

function beginDragVisuals(){
    dragState.dragging = true;
    const el = dragState.el;
    const rect = el.getBoundingClientRect();
    const ghost = el.cloneNode(true);
    ghost.className = 'h-piece drag-ghost';
    ghost.style.left = rect.left + 'px';
    ghost.style.top = rect.top + 'px';
    ghost.style.width = rect.width + 'px';
    ghost.style.height = rect.height + 'px';
    ghost.style.margin = '0';
    document.body.appendChild(ghost);
    dragState.ghost = ghost;
    dragState.startLeft = rect.left;
    dragState.startTop = rect.top;
    el.classList.add('dragging-source');
    dragState.prevBodyTouchAction = document.body.style.touchAction;
    dragState.prevBodyOverflow = document.body.style.overflow;
    document.body.style.touchAction = 'none';
    document.body.style.overflow = 'hidden';
  }

function getDropSide(clientX, clientY){
    const boardZone = document.querySelector('.board-zone');
    const bz = boardZone.getBoundingClientRect();
    const margin = 48; // tolerância generosa pra facilitar soltar com o dedo
    if(clientX < bz.left-margin || clientX > bz.right+margin || clientY < bz.top-margin || clientY > bz.bottom+margin){
      return null;
    }
    if(chain.length===0){
      return 'left';
    }
    const pieces = document.querySelectorAll('#chain .piece');
    if(pieces.length===0) return null;
    const first = pieces[0].getBoundingClientRect();
    const last = pieces[pieces.length-1].getBoundingClientRect();

function distToRect(r){
      const dx = Math.max(r.left-clientX, 0, clientX-r.right);
      const dy = Math.max(r.top-clientY, 0, clientY-r.bottom);
      return Math.hypot(dx,dy);
    }

const tile = playerHand[dragState ? dragState.idx : selectedIdx];
    const matchesLeft = tile && (tile[0]===leftEnd || tile[1]===leftEnd);
    const matchesRight = tile && (tile[0]===rightEnd || tile[1]===rightEnd);

if(pieces.length===1){
      // única peça na mesa: usa a metade mais próxima do toque, respeitando o que a peça encaixa
      if(matchesLeft && !matchesRight) return 'left';
      if(matchesRight && !matchesLeft) return 'right';
      return (clientX - first.left) < first.width/2 ? 'left' : 'right';
    }

const dFirst = distToRect(first);
    const dLast = distToRect(last);
    return dFirst<=dLast ? 'left' : 'right';
  }

function sideIsValid(idx, side){
    if(!side) return false;
    if(chain.length===0) return true;
    const tile = playerHand[idx];
    return side==='left' ? (tile[0]===leftEnd||tile[1]===leftEnd) : (tile[0]===rightEnd||tile[1]===rightEnd);
  }

function updateDropHighlight(clientX, clientY){
    document.querySelectorAll('.drop-hover').forEach(e=>e.classList.remove('drop-hover'));
    const side = getDropSide(clientX, clientY);
    if(!sideIsValid(dragState.idx, side)) return;
    if(chain.length===0){
      document.querySelector('.board-zone').classList.add('drop-hover');
      return;
    }
    const pieces = document.querySelectorAll('#chain .piece');
    const target = side==='left' ? pieces[0] : pieces[pieces.length-1];
    if(target) target.classList.add('drop-hover');
  }

function onHandPointerUp(e){
    if(!dragState) return;
    document.removeEventListener('pointermove', onHandPointerMove);
    document.removeEventListener('pointerup', onHandPointerUp);
    document.removeEventListener('pointercancel', onHandPointerUp);
    document.querySelectorAll('.drop-hover').forEach(el=>el.classList.remove('drop-hover'));

if(dragState.dragging){
      document.body.style.touchAction = dragState.prevBodyTouchAction || '';
      document.body.style.overflow = dragState.prevBodyOverflow || '';
    }

const wasDragging = dragState.dragging;
    const idx = dragState.idx;

if(wasDragging){
      const side = getDropSide(e.clientX, e.clientY);
      const valid = sideIsValid(idx, side);
      if(dragState.ghost) dragState.ghost.remove();
      dragState.el.classList.remove('dragging-source');
      dragState = null;
      if(valid){
        lastPlacedSide = chain.length===0 ? 'first' : side;
        playTile(idx, chain.length===0 ? 'left' : side);
      }
    } else {
      dragState = null;
      onTileClick(idx);
    }
  }

function onEndClick(side){
    if(selectedIdx===null || turn!=='you' || isDealing) return;
    const tile = playerHand[selectedIdx];
    const matches = side==='left' ? (tile[0]===leftEnd||tile[1]===leftEnd) : (tile[0]===rightEnd||tile[1]===rightEnd);
    if(!matches) return;
    lastPlacedSide = side;
    playTile(selectedIdx, side);
  }

function playTile(idx, side){
    const tile = playerHand[idx];
    if(tile[0]===tile[1]) Sound.clackHeavy(); else Sound.clack();
    placeOnChain(tile, side);
    playerHand.splice(idx,1);
    selectedIdx = null;
    passStreak = 0;
    afterMove('you');
  }

function afterMove(who){
    render();
    if(playerHand.length===0 || aiHand.length===0){
      endRound(who);
      return;
    }
    turn = who==='you' ? 'ai' : 'you';
    render();
    checkBlockedOrContinue();
  }

// ---------- AI difficulty ----------
  function diffLabel(d){
    return d==='facil' ? 'fácil' : d==='dificil' ? 'difícil' : 'médio';
  }
  const QUICK_MATCH_REWARDS = {facil:50, medio:75, dificil:100};

function aiThinkDelay(){
    if(aiDifficulty==='facil') return 700 + Math.random()*400;
    if(aiDifficulty==='dificil') return 1900 + Math.random()*500;
    return 1300 + Math.random()*400;
  }

// Quantas peças de cada valor (0-6) ainda estão "escondidas" — ou seja, na
  // mão do adversário ou no monte. Cada valor aparece 8x no total no jogo
  // (a peça dobrada conta 2x + 6 peças mistas). Subtraindo o que já vimos na
  // corrente e o que está na própria mão da IA, sobra uma estimativa de quantas
  // peças daquele valor o adversário pode ter — útil pra "fechar" pontas.
  function unseenValueCounts(){
    const counts = [8,8,8,8,8,8,8];
    function subtractTile(t){ counts[t[0]]--; counts[t[1]]--; }
    chain.forEach(c=>subtractTile(c.tile));
    aiHand.forEach(subtractTile);
    return counts;
  }

// Escolhe qual peça/lado jogar de acordo com a dificuldade escolhida.
  function chooseAIOption(options){
    if(options.length===1) return options[0];

if(aiDifficulty==='facil'){
      // Joga de forma pouco estratégica: na maior parte das vezes é aleatório,
      // só evita jogar a pior peça possível pra não parecer totalmente "burra".
      if(Math.random() < 0.8){
        return options[Math.floor(Math.random()*options.length)];
      }
      // 20% das vezes usa um critério simples (maior soma de pontos)
      const sorted = options.slice().sort((o1,o2)=>{
        const t1 = aiHand[o1.idx], t2 = aiHand[o2.idx];
        return (t2[0]+t2[1]) - (t1[0]+t1[1]);
      });
      return sorted[0];
    }

if(aiDifficulty==='medio'){
      // Estratégia intermediária: soma pontos + valoriza dobradas + já pensa
      // um pouco na própria mobilidade (evita se travar), mas sem "contar"
      // as peças do adversário como no difícil. Mantém uma pitada de
      // imprevisibilidade pra não parecer perfeita.
      const scored = options.map(o=>{
        const tile = aiHand[o.idx];
        const isDouble = tile[0]===tile[1];
        const pipTotal = tile[0]+tile[1];
        const remaining = aiHand.filter((_,i)=>i!==o.idx);

let newEnd = null;
        if(chain.length>0){
          if(o.side==='left') newEnd = (tile[0]===leftEnd) ? tile[1] : tile[0];
          else newEnd = (tile[0]===rightEnd) ? tile[1] : tile[0];
        }
        const mobility = newEnd!==null
          ? remaining.filter(t=>t[0]===newEnd||t[1]===newEnd).length
          : remaining.length;

let score = pipTotal * 1.1 + (isDouble ? 5 : 0) + mobility * 1.6;
        score += (Math.random() - 0.5) * 3; // variação moderada — ainda dá pra vencer
        return {opt:o, score};
      });
      scored.sort((a,b)=>b.score-a.score);
      return scored[0].opt;
    }

// difícil: conta peças, pensa na mobilidade própria, tenta fechar pontas
    // ruins pro adversário e prioriza esvaziar a mão perto do fim de jogo.
    const unseen = unseenValueCounts();
    const boneyardEmpty = boneyard.length===0;
    const endgame = aiHand.length<=3 || playerHand.length<=3;

const scored = options.map(o=>{
      const tile = aiHand[o.idx];
      const isDouble = tile[0]===tile[1];
      const pipTotal = tile[0]+tile[1];
      const remaining = aiHand.filter((_,i)=>i!==o.idx);

// qual valor fica exposto na nova ponta depois dessa jogada
      let newEnd = null;
      if(chain.length>0){
        if(o.side==='left') newEnd = (tile[0]===leftEnd) ? tile[1] : tile[0];
        else newEnd = (tile[0]===rightEnd) ? tile[1] : tile[0];
      }
      // mobilidade: quantas peças da própria mão ainda encaixariam depois dessa jogada
      const mobility = newEnd!==null
        ? remaining.filter(t=>t[0]===newEnd||t[1]===newEnd).length
        : remaining.length;

// bloqueio: quanto menos peças "escondidas" (mão do adversário + monte)
      // combinam com o novo valor exposto, mais difícil fica pro adversário
      // responder — isso é ainda mais valioso quando o monte já acabou,
      // porque o adversário não pode comprar e pode ficar preso de vez.
      const danger = newEnd!==null ? unseen[newEnd] : 4;
      const blockWeight = boneyardEmpty ? 2.4 : 1.1;

// no fim de jogo, o que importa é esvaziar rápido (soma de pontos e
      // dobradas) e evitar deixar o adversário bater primeiro
      const endgameBoost = endgame ? (pipTotal * 1.2 + (isDouble ? 4 : 0)) : 0;

let score = pipTotal * 1.4
        + (isDouble ? 7 : 0)
        + mobility * 3
        - danger * blockWeight
        + endgameBoost;
      score += Math.random() * 0.15; // quase determinístico — decisões bem mais certeiras
      return {opt:o, score};
    });
    scored.sort((a,b)=>b.score-a.score);
    return scored[0].opt;
  }

function animateAiPlacement(tile, side, onComplete){
    const aiRow = document.getElementById('aiRow');
    const sourceTile = aiRow.querySelector('.ai-tile');
    const sourceRect = sourceTile ? sourceTile.getBoundingClientRect() : aiRow.getBoundingClientRect();

placeOnChain(tile, side==='first' ? 'left' : side);
    render();

if(!newPieceEl){ onComplete(); return; }

const targetRect = newPieceEl.getBoundingClientRect();
    const clone = newPieceEl.cloneNode(true);
    clone.classList.remove('landing');
    clone.style.position = 'fixed';
    clone.style.left = targetRect.left + 'px';
    clone.style.top = targetRect.top + 'px';
    clone.style.width = targetRect.width + 'px';
    clone.style.height = targetRect.height + 'px';
    clone.style.margin = '0';
    clone.style.zIndex = '80';
    clone.style.pointerEvents = 'none';
    clone.style.transition = 'none';
    document.body.appendChild(clone);

newPieceEl.style.visibility = 'hidden';

const dx = (sourceRect.left + sourceRect.width/2) - (targetRect.left + targetRect.width/2);
    const dy = (sourceRect.top + sourceRect.height/2) - (targetRect.top + targetRect.height/2);
    const spin = (Math.random()<0.5 ? -1 : 1) * (280 + Math.random()*160);

clone.style.transform = `translate(${dx}px, ${dy}px) rotate(${spin}deg) scale(0.8)`;

requestAnimationFrame(()=>{
      requestAnimationFrame(()=>{
        clone.style.transition = 'transform .52s cubic-bezier(.25,.68,.3,1)';
        clone.style.transform = 'translate(0px, 0px) rotate(0deg) scale(1)';
      });
    });

setTimeout(()=>{
      clone.remove();
      newPieceEl.style.visibility = '';
      if(tile[0]===tile[1]) Sound.clackHeavy(); else Sound.clack();
      onComplete();
    }, 540);
  }

function passTurn(){
    if(turn!=='you' || gameOver) return;
    if(playerHand.some(canPlay) || boneyard.length>0) return;
    passStreak++;
    showToast('Você passa a vez');
    if(passStreak>=2){ endRound(null); return; }
    turn = 'ai';
    render();
    checkBlockedOrContinue();
  }

function pipSum(hand){
    return hand.reduce((s,t)=>s+t[0]+t[1],0);
  }

if(tourneySize > 0){
      handleTourneyProgress(title, text, roundWinner);
      return;
    }
    if(betAmount <= 0){
      if(roundWinner === 'you'){
        const reward = QUICK_MATCH_REWARDS[aiDifficulty] || 0;
        if(reward > 0){
          const saldoAtual = loadSaldo();
          saveSaldo(saldoAtual + reward);
          checkMoneyAchievements(saldoAtual + reward);
          text += ' Você ganhou ' + formatMoney(reward) + ' por vencer a IA ' + diffLabel(aiDifficulty) + '. Seu saldo agora é ' + formatMoney(saldoAtual + reward) + '.';
        }
      }
      showOverlay(title, text);
      return;
    }
    handleMatchProgress(title, text, roundWinner);
  }

function handleMatchProgress(roundTitle, roundText, roundWinner){
    if(!inTieBreak){
      if(roundWinner === 'you') matchWinsYou++;
      else if(roundWinner === 'ai') matchWinsAI++;
      const decided = (matchWinsYou >= 2 || matchWinsAI >= 2);

if(matchRound < MATCH_TOTAL_ROUNDS && !decided){
        const nextRound = matchRound + 1;
        showOverlay(
          roundTitle,
          roundText + ' Placar da aposta: você ' + scores.you + ' x ' + scores.ai + ' ' + (currentOpponentDisplayName() || 'máquina') + '. Próxima partida (' + nextRound + '/' + MATCH_TOTAL_ROUNDS + ').',
          'Próxima partida',
          function(){ matchRound = nextRound; newGame(); }
        );
        return;
      }
      if(decided && matchRound < MATCH_TOTAL_ROUNDS){
        // Um dos lados já venceu 2 das 3 partidas — não há mais chance de reação, então pula a 3ª.
        finalizeMatch(roundText, true);
        return;
      }
      // acabaram as 3 partidas
      if(scores.you === scores.ai){
        inTieBreak = true;
        showOverlay(
          'Empate na aposta!',
          roundText + ' As ' + MATCH_TOTAL_ROUNDS + ' partidas empataram em pontos (' + scores.you + ' a ' + scores.ai + '). Vai ter uma partida extra de desempate.',
          'Jogar desempate',
          newGame
        );
        return;
      }
      finalizeMatch(roundText);
    } else {
      // rodada de desempate concluída
      if(scores.you === scores.ai){
        showOverlay(
          'Ainda empatado',
          roundText + ' Ninguém pontuou no desempate. Vamos jogar mais uma.',
          'Jogar novamente',
          newGame
        );
        return;
      }
      finalizeMatch(roundText);
    }
  }

// ---------- UI helpers ----------
  let toastTimer = null;
  function showToast(msg){
    const t = document.getElementById('toast');
    t.textContent = msg;
    t.classList.add('show');
    clearTimeout(toastTimer);
    toastTimer = setTimeout(()=> t.classList.remove('show'), 2200);
  }

let overlayAction = newGame;
  function showOverlay(title, text, btnLabel, action){
    document.getElementById('overlayTitle').textContent = title;
    document.getElementById('overlayText').textContent = text;
    document.getElementById('overlayBtn').textContent = btnLabel || 'Jogar novamente';
    overlayAction = action || newGame;
    document.getElementById('overlay').classList.add('show');
  }
  function hideOverlay(){
    document.getElementById('overlay').classList.remove('show');
  }

function goToMenu(){
    if(window.parent && window.parent !== window){
      window.parent.postMessage({type:'domino-navigate', to:'menu'}, '*');
    } else {
      window.location.href = 'domino-origens-menu.html';
    }
  }

function showPause(){
    document.getElementById('pauseOverlay').classList.add('show');
  }
  function hidePause(){
    document.getElementById('pauseOverlay').classList.remove('show');
  }

document.getElementById('drawBtn').addEventListener('click', drawTile);
  document.getElementById('passBtn').addEventListener('click', passTurn);
  document.getElementById('overlayBtn').addEventListener('click', function(){ overlayAction(); });
  document.getElementById('overlayMenuBtn').addEventListener('click', goToMenu);

document.getElementById('continueBtn').addEventListener('click', hidePause);
  document.getElementById('abandonBtn').addEventListener('click', abandonMatch);

document.getElementById('menuBtn').addEventListener('click', function(){
    if(gameOver){
      goToMenu();
    } else {
      showPause();
    }
  });

newGame();
})();
</script>
</body>
</html>