:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
  --soy:#5b3924;
  --text:#3f2a1d;
  --muted:#8c6a55;
  --card:#fffdf4;
  --orange:#ffb44f;
  --blue:#64c7f2;
  --pink:#ff83a8;
  --green:#55c96d;
  --shadow:0 8px 18px rgba(91,57,36,.18);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body,#app{margin:0;width:100%;height:100%;overflow:hidden;touch-action:manipulation}
body{
  font-family:-apple-system,BlinkMacSystemFont,"Hiragino Sans","Yu Gothic",Arial,sans-serif;
  color:var(--text);
  background:linear-gradient(180deg,#fff7e8 0%,#ffe0bf 52%,#ffd5d5 100%);
  overscroll-behavior:none;
}
button{border:0;font-family:inherit;touch-action:manipulation}
.game{
  width:100vw;height:100vh;height:100dvh;display:flex;flex-direction:column;position:relative;overflow:hidden;
  background:
    radial-gradient(circle at 12% 16%,rgba(255,255,255,.72) 0 34px,transparent 36px),
    radial-gradient(circle at 86% 11%,rgba(255,255,255,.55) 0 42px,transparent 44px),
    linear-gradient(180deg,#fff7e8 0%,#ffe0bf 58%,#ffd5d5 100%);
}
.header{padding:calc(7px + var(--safe-top)) 10px 7px;display:flex;align-items:center;justify-content:space-between;gap:8px}
.brand{display:flex;align-items:center;gap:8px;min-width:0;flex:1}
.brandText{min-width:0}
.avatar{
  width:43px;height:43px;flex:0 0 43px;border-radius:50%;background:#fff;display:flex;align-items:center;justify-content:center;font-size:27px;
  border:3px solid #ffb19a;box-shadow:var(--shadow)
}
.title{font-size:clamp(16px,4.8vw,21px);font-weight:950;color:var(--soy);line-height:1.08;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sub{font-size:clamp(9px,2.6vw,12px);color:#9a6645;margin-top:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:54vw}
.stats{display:grid;grid-template-columns:repeat(2,minmax(46px,54px));gap:5px;flex:0 0 auto}
.stat{
  background:#fffdf4;border-radius:14px;border:2px solid rgba(255,143,106,.28);
  padding:4px 3px;text-align:center;box-shadow:0 5px 12px rgba(91,57,36,.12);color:var(--soy);min-width:0
}
.stat b{display:block;font-size:clamp(13px,3.8vw,16px);line-height:1;color:var(--soy);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat span{display:block;font-size:clamp(8px,2.4vw,10px);color:#9a6645;margin-top:1px;white-space:nowrap}
.boardWrap{flex:1;min-height:0;padding:0 10px 6px}
.board{
  position:relative;width:100%;height:100%;overflow:hidden;border-radius:28px;
  background:
    radial-gradient(circle at 18% 24%,rgba(255,255,255,.36) 0 45px,transparent 48px),
    radial-gradient(circle at 78% 67%,rgba(255,255,255,.24) 0 58px,transparent 61px),
    repeating-linear-gradient(90deg,rgba(255,255,255,.10) 0 16px,rgba(255,180,79,.08) 16px 32px),
    linear-gradient(180deg,#ffe9cc,#ffc6b3);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.62), var(--shadow);
  contain:layout paint style;
}
.board::before{
  content:"";position:absolute;left:18px;right:18px;top:56px;bottom:16px;border-radius:24px;
  background:rgba(255,253,245,.22);border:2px dashed rgba(91,57,36,.12);pointer-events:none;
}
.badge{
  position:absolute;top:10px;z-index:50;background:rgba(255,253,241,.95);border:2px solid #fff;
  border-radius:999px;padding:7px 10px;box-shadow:0 6px 13px rgba(91,57,36,.15);
  font-size:clamp(10px,3vw,13px);font-weight:950;max-width:34%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap
}
#comboBadge{left:10px;color:#c06a15}
#remainBadge{right:10px;color:var(--soy)}
#hardBadge{left:50%;transform:translateX(-50%);color:#b33626;max-width:36%}
.tile{
  position:absolute;width:47px;height:47px;border-radius:14px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#fffefa,#fff0d6);border:3px solid #fff;font-size:25px;
  box-shadow:0 6px 0 #e0b475,0 9px 14px rgba(91,57,36,.24);
  user-select:none;touch-action:manipulation;transition:filter .12s, transform .12s, opacity .15s;will-change:transform,opacity;contain:layout paint style;
}
.tile::before{content:"";position:absolute;left:8px;top:6px;width:22px;height:7px;border-radius:99px;background:rgba(255,255,255,.75);transform:rotate(-14deg)}
.tile.locked{filter:brightness(.58) saturate(.72);box-shadow:0 5px 0 #8f7050,0 8px 12px rgba(0,0,0,.22)}
.tile:active{transform:scale(.9)}
.tile.flyout{animation:flyout .16s ease forwards}
@keyframes flyout{to{transform:scale(.25) rotate(14deg);opacity:0}}
.floatFx{position:absolute;z-index:999;pointer-events:none;color:#fff;font-weight:950;text-shadow:0 2px 8px rgba(0,0,0,.35);animation:up .8s ease forwards}
@keyframes up{to{transform:translateY(-38px);opacity:0}}
.slotPanel{background:rgba(255,255,255,.94);border-top:3px solid rgba(255,255,255,.88);padding:8px 10px 7px}
.slotHeader{display:flex;justify-content:space-between;align-items:center;gap:8px;font-size:clamp(10px,2.8vw,12px);font-weight:900;color:#8a5a3b;margin:0 3px 6px}
.slotHeader span{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slots{display:grid;grid-template-columns:repeat(7,1fr);gap:5px}
.slot{height:45px;border-radius:14px;border:2px dashed #d8b98d;background:#f8eedb;display:flex;align-items:center;justify-content:center;font-size:24px;min-width:0}
.slot.filled{border-style:solid;border-color:#fff;background:linear-gradient(180deg,#fffefa,#fff0d6);box-shadow:0 4px 0 #e0b475}
.controls{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;padding:7px 9px calc(9px + var(--safe-bottom));background:#fffaf0}
.btn{
  min-height:45px;border-radius:15px;color:white;font-weight:950;font-size:clamp(10px,3vw,12px);line-height:1.16;
  box-shadow:0 6px 0 rgba(0,0,0,.15),0 7px 13px rgba(0,0,0,.07);overflow:hidden
}
.toolBtn{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;padding:5px 2px}
.toolBtn span,.toolBtn small{display:block;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.toolBtn small{font-size:clamp(8px,2.5vw,10px);opacity:.94}
.btn:active{transform:translateY(4px);box-shadow:0 2px 0 rgba(0,0,0,.15)}
.orange{background:linear-gradient(180deg,#ffc45d,#ff8f2f)}
.blue{background:linear-gradient(180deg,#77d4ff,#2f9fe8)}
.pink{background:linear-gradient(180deg,#ff98b9,#ed5b8b)}
.green{background:linear-gradient(180deg,#94d96d,#52ad3b)}
.gray{background:linear-gradient(180deg,#b2a59a,#76675c)}
.toast{
  position:absolute;left:50%;bottom:165px;transform:translateX(-50%);padding:10px 15px;border-radius:999px;
  background:rgba(91,57,36,.94);color:white;font-size:clamp(11px,3.4vw,13px);font-weight:850;display:none;z-index:300;
  box-shadow:0 8px 20px rgba(0,0,0,.22);max-width:90vw;text-align:center
}
.modalMask{position:absolute;inset:0;background:rgba(67,39,23,.56);z-index:200;display:none;align-items:center;justify-content:center;padding:18px}
.modal{
  width:100%;max-width:360px;text-align:center;background:#fffdf0;border-radius:28px;padding:20px 18px 18px;border:4px solid #fff;box-shadow:0 20px 60px rgba(0,0,0,.28)
}
.modal.compact{max-width:330px}
.modalIcon{font-size:50px;margin-bottom:4px}
.modal h2{margin:0 0 8px;font-size:clamp(20px,6vw,26px);color:var(--soy)}
.modal p{margin:0;color:#7b5b44;font-size:clamp(12px,3.7vw,14px);line-height:1.55;overflow-wrap:anywhere}
.row{display:flex;gap:8px;margin-top:14px}
.row button{flex:1}
.panel{
  position:absolute;inset:auto 10px calc(67px + var(--safe-bottom)) 10px;max-height:62vh;overflow:auto;background:#fffdf0;
  border:4px solid #fff;border-radius:24px;z-index:150;padding:14px;box-shadow:0 18px 44px rgba(0,0,0,.22);display:none
}
.panel h3{margin:12px 0 10px;color:var(--soy);font-size:clamp(15px,4.5vw,18px)}
.recordItem{padding:9px;background:#fff1dc;border-radius:14px;margin-bottom:7px;font-size:clamp(11px,3.2vw,12px);line-height:1.5;color:#7b5b44;overflow-wrap:anywhere}
.recordItem b{font-size:clamp(12px,3.7vw,14px);color:var(--soy)}
.rankItem.me,.recordItem.me{background:#e9ffe8;border:2px solid #65c86b;box-shadow:0 4px 12px rgba(59,150,64,.18)}
.wideBtn{width:100%;margin-bottom:8px}
.pausedTag{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);background:rgba(91,57,36,.92);color:#fff;border-radius:999px;padding:12px 18px;font-weight:950;z-index:180;display:none}
.titleBox{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-top:12px}
.titleMedal{display:inline-block;background:linear-gradient(180deg,#fff2a8,#ffc65a);color:#7b471b;border-radius:999px;padding:6px 10px;font-size:12px;font-weight:950;border:2px solid #fff;box-shadow:0 4px 10px rgba(91,57,36,.15)}
.soundRows{display:grid;grid-template-columns:1fr;gap:8px;margin-top:14px}
.soundToggle{border-radius:16px;background:#fff1dc;color:#5b3924;font-weight:950;padding:14px;border:2px solid #ffd3b5;font-size:15px}
.soundToggle.off{background:#eee4d8;color:#927765}
.adOverlay{position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9999;display:flex;align-items:center;justify-content:center;padding:20px}
.adBox{background:#fffdf0;border:4px solid #fff;border-radius:28px;padding:22px;min-width:260px;text-align:center;color:#5b3924;box-shadow:0 18px 44px rgba(0,0,0,.25)}
.adIcon{font-size:48px}.adBox h3{margin:8px 0}.adCountdown{font-size:42px;font-weight:950;margin-top:10px}
@media(max-width:370px){
  .tile{width:43px;height:43px;font-size:23px;border-radius:13px}
  .slot{height:42px;font-size:22px}
  .avatar{width:39px;height:39px;flex-basis:39px;font-size:24px}
  .controls{gap:5px;padding-left:7px;padding-right:7px}
  .btn{min-height:42px}
  .stats{grid-template-columns:repeat(2,48px)}
}

.legalFooter{
  position:absolute;
  left:8px;
  right:8px;
  bottom:calc(65px + var(--safe-bottom));
  z-index:120;
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  font-size:clamp(10px,2.8vw,12px);
  font-weight:800;
  color:#7b5b44;
  pointer-events:auto;
}
.legalFooter a{
  color:#5b3924;
  background:rgba(255,253,244,.94);
  border:1px solid rgba(91,57,36,.18);
  border-radius:999px;
  padding:5px 9px;
  text-decoration:none;
  box-shadow:0 3px 8px rgba(91,57,36,.12);
}
.legalFooter span{color:#9a6645}


/* Review fix: keep legal links at the very bottom and away from slots */
.legalFooter{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:calc(4px + env(safe-area-inset-bottom)) !important;
  z-index:500 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:8px !important;
  pointer-events:auto !important;
  font-size:clamp(10px,2.7vw,12px) !important;
}
.legalFooter a{
  background:rgba(255,253,244,.96) !important;
  color:#5b3924 !important;
  border:1px solid rgba(91,57,36,.18) !important;
  border-radius:999px !important;
  padding:4px 10px !important;
  text-decoration:none !important;
  box-shadow:0 3px 8px rgba(91,57,36,.12) !important;
}
.controls{
  padding-bottom:calc(28px + env(safe-area-inset-bottom)) !important;
}
.panel{
  bottom:calc(92px + env(safe-area-inset-bottom)) !important;
}
.toast{
  bottom:190px !important;
}


/* Coin and legal bottom layout fix */
.legalFooter{
  position:fixed !important;
  left:0 !important;
  right:0 !important;
  bottom:calc(-3px + env(safe-area-inset-bottom)) !important;
  transform:none !important;
  z-index:450 !important;
  display:flex !important;
  justify-content:center !important;
  align-items:center !important;
  gap:7px !important;
  pointer-events:auto !important;
  font-size:clamp(9px,2.45vw,11px) !important;
}
.legalFooter a{
  background:rgba(255,253,244,.96) !important;
  color:#5b3924 !important;
  border:1px solid rgba(91,57,36,.18) !important;
  border-radius:999px !important;
  padding:3px 8px !important;
  text-decoration:none !important;
  box-shadow:0 2px 6px rgba(91,57,36,.12) !important;
}
.controls{
  padding-bottom:calc(36px + env(safe-area-inset-bottom)) !important;
}
.toolBtn small.lackCoin{
  color:#ff2b2b !important;
  background:rgba(255,255,255,.88) !important;
  border-radius:999px !important;
  padding:1px 6px !important;
  font-weight:950 !important;
}
.toolBtn small.adChance{
  color:#fff8d0 !important;
}
.toolBtn small.usedUp{
  color:rgba(255,255,255,.72) !important;
}
.panel{
  bottom:calc(95px + env(safe-area-inset-bottom)) !important;
}
.toast{
  bottom:190px !important;
}
@media(max-height:720px){
  .legalFooter{bottom:calc(-5px + env(safe-area-inset-bottom)) !important;}
  .controls{padding-bottom:calc(32px + env(safe-area-inset-bottom)) !important;}
}