/* ============================================================
   マーブリングアプリ  mba- プレフィックスでスコープ化
   配色: 紺 #1e3a5f / 白 / 金 #d4af37
   ============================================================ */
:root{
  --mba-navy:#1e3a5f;
  --mba-navy-light:#2c4f7c;
  --mba-gold:#d4af37;
  --mba-gold-dark:#b8941f;
  --mba-water:#dce9f2;
}
.mba-wp-root *{box-sizing:border-box;}

.mba-wp-root{
  font-family:"M PLUS Rounded 1c","BIZ UDPGothic","Hiragino Maru Gothic ProN","Yu Gothic UI",sans-serif;
  background:#f5f7fa;
  -webkit-user-select:none;user-select:none;
  -webkit-tap-highlight-color:transparent;
}
.mba-hidden{display:none !important;}

#mba-app{height:80vw;max-height:calc(100dvh - 80px);min-height:520px;display:flex;flex-direction:column;}

/* ---------- 上部バー ---------- */
.mba-header{
  background:var(--mba-navy);
  color:#fff;
  display:flex;align-items:center;gap:8px;
  padding:8px 12px;
  flex:0 0 auto;
}
.mba-title{
  font-size:1.15rem;font-weight:700;letter-spacing:.05em;
  margin-right:auto;display:flex;align-items:center;gap:8px;
}
.mba-title::before{
  content:"";display:inline-block;width:10px;height:10px;border-radius:50%;
  background:var(--mba-gold);
}
.mba-hbtn{
  font-family:inherit;font-size:.85rem;font-weight:700;
  border:2px solid rgba(255,255,255,.7);border-radius:10px;
  background:transparent;color:#fff;
  padding:7px 14px;cursor:pointer;line-height:1;
  transition:background .15s;
}
.mba-hbtn:active{background:rgba(255,255,255,.15);}
.mba-hbtn:disabled{opacity:.35;cursor:default;}
.mba-hbtn--gold{
  background:var(--mba-gold);border-color:var(--mba-gold);
  color:var(--mba-navy);
}
.mba-hbtn--gold:active{background:var(--mba-gold-dark);}

/* ---------- 水面キャンバス ---------- */
.mba-main{flex:1 1 auto;position:relative;min-height:0;padding:8px;}
.mba-canvas-wrap{
  position:absolute;inset:8px;
  border-radius:14px;overflow:hidden;
  border:3px solid var(--mba-navy);
  background:var(--mba-water);
  box-shadow:0 4px 14px rgba(30,58,95,.18);
}
#mba-canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:none;cursor:crosshair;}

/* 紙をのせる演出 */
.mba-paper-overlay{
  position:absolute;inset:0;z-index:5;
  display:flex;align-items:center;justify-content:center;
  pointer-events:none;
}
.mba-paper{
  position:absolute;inset:0;background:#ffffff;
  opacity:0;
  animation:mba-paper-down 1.5s ease-in-out forwards;
}
@keyframes mba-paper-down{
  0%{opacity:0;transform:translateY(-104%) rotate(-2deg);}
  45%{opacity:.96;transform:translateY(0) rotate(0deg);}
  100%{opacity:.96;transform:translateY(0);}
}
.mba-paper-msg{
  position:relative;z-index:6;
  font-size:1.3rem;font-weight:700;color:var(--mba-navy);
  opacity:0;animation:mba-msg-in .4s ease .8s forwards;
}
@keyframes mba-msg-in{to{opacity:1;}}
.mba-paper-msg .mba-dots::after{
  content:"";animation:mba-dots 1.2s steps(4) infinite;
}
@keyframes mba-dots{
  0%{content:"";}25%{content:"・";}50%{content:"・・";}75%{content:"・・・";}
}

/* ---------- 下部:パレットとツール ---------- */
.mba-footer{
  flex:0 0 auto;background:#fff;
  border-top:3px solid var(--mba-navy);
  padding:8px 10px 10px;
  display:flex;flex-direction:column;gap:8px;
}
.mba-palette{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;}
.mba-swatch{
  width:38px;height:38px;border-radius:50%;
  border:3px solid rgba(30,58,95,.25);
  cursor:pointer;padding:0;
  transition:transform .12s;
}
.mba-swatch:active{transform:scale(.9);}
.mba-swatch--on{
  border-color:var(--mba-gold);
  box-shadow:0 0 0 3px rgba(212,175,55,.45);
  transform:scale(1.12);
}
.mba-tools{display:flex;justify-content:center;gap:8px;flex-wrap:wrap;}
.mba-tool{
  font-family:inherit;font-size:.82rem;font-weight:700;
  display:flex;align-items:center;gap:6px;
  border:2px solid var(--mba-navy);border-radius:12px;
  background:#fff;color:var(--mba-navy);
  padding:8px 14px;cursor:pointer;line-height:1;
}
.mba-tool svg{width:18px;height:18px;flex:0 0 auto;}
.mba-tool--on{
  background:var(--mba-navy);color:#fff;
}
.mba-tool--on svg *{stroke:#fff;}

/* ---------- 完成画面 ---------- */
#mba-result{
  min-height:520px;display:flex;flex-direction:column;align-items:center;
  gap:14px;padding:16px;overflow:hidden;
  background:#f5f7fa;
}
.mba-result-title{
  font-size:1.3rem;font-weight:700;color:var(--mba-navy);
  display:flex;align-items:center;gap:8px;
}
.mba-result-title::before,.mba-result-title::after{
  content:"";width:28px;height:3px;background:var(--mba-gold);border-radius:2px;
}
.mba-result-frame{
  flex:1 1 auto;min-height:0;display:flex;align-items:center;justify-content:center;
  width:100%;
}
#mba-result-canvas{
  max-width:100%;max-height:100%;
  background:#fff;
  border:10px solid #fff;border-radius:6px;
  box-shadow:0 6px 22px rgba(30,58,95,.25);
}
.mba-result-name{display:flex;align-items:center;gap:8px;}
.mba-result-name label{font-weight:700;color:var(--mba-navy);font-size:.95rem;}
#mba-name-input{
  font-family:inherit;font-size:1rem;
  border:2px solid var(--mba-navy);border-radius:10px;
  padding:8px 12px;width:min(280px,60vw);
  color:var(--mba-navy);background:#fff;
}
#mba-name-input:focus{outline:3px solid rgba(212,175,55,.5);}
.mba-result-btns{display:flex;gap:12px;padding-bottom:6px;}
.mba-rbtn{
  font-family:inherit;font-size:1rem;font-weight:700;
  border-radius:12px;padding:12px 22px;cursor:pointer;line-height:1;
  border:2px solid var(--mba-navy);
  background:#fff;color:var(--mba-navy);
}
.mba-rbtn--gold{
  background:var(--mba-gold);border-color:var(--mba-gold);color:var(--mba-navy);
}
.mba-rbtn:active{transform:scale(.97);}

/* ---------- 確認モーダル ---------- */
.mba-modal-bg{
  position:fixed;inset:0;background:rgba(30,58,95,.45);
  display:flex;align-items:center;justify-content:center;z-index:20;
}
.mba-modal{
  background:#fff;border-radius:16px;padding:22px 26px;
  border-top:6px solid var(--mba-gold);
  box-shadow:0 8px 30px rgba(0,0,0,.25);
  text-align:center;max-width:86vw;
}
.mba-modal p{font-size:1.05rem;font-weight:700;color:var(--mba-navy);margin-bottom:18px;}
.mba-modal-btns{display:flex;gap:12px;justify-content:center;}

/* ---------- トースト ---------- */
#mba-toast{
  position:fixed;left:50%;bottom:110px;transform:translateX(-50%);
  background:var(--mba-navy);color:#fff;font-weight:700;
  padding:10px 20px;border-radius:999px;font-size:.9rem;
  opacity:0;pointer-events:none;transition:opacity .25s;z-index:30;
  border:2px solid var(--mba-gold);
}
#mba-toast.mba-toast-show{opacity:1;}

/* ---------- 小さい画面 ---------- */
@media (max-width:600px){
  .mba-title{font-size:1rem;}
  .mba-hbtn{font-size:.75rem;padding:6px 10px;}
  .mba-swatch{width:32px;height:32px;}
  .mba-tool{font-size:.74rem;padding:7px 10px;}
}