/* Magnetic Poetry - all rules are scoped under .mp-app so they won't affect the rest of your site. */
.mp-app{
  --mp-door:#cfdcd6; --mp-edge:#b5c6bf; --mp-ink:#22302c; --mp-tile:#f7f1e3; --mp-tile-ink:#2b2622;
  --mp-shadow:rgba(30,45,40,.35); --mp-bar:#e4ece8; --mp-accent:#c4492f; --mp-accent-ink:#fff;
  box-sizing:border-box; display:flex; flex-direction:column;
  width:100%; height:100vh; height:100dvh; margin:0; overflow:hidden;   /* fills the whole browser window */
  background:var(--mp-door); color:var(--mp-ink);
  font-family:"Courier Prime","Courier New",monospace;
}
@media (prefers-color-scheme:dark){
  .mp-app{
    --mp-door:#26332f; --mp-edge:#34443f; --mp-ink:#e3ece8; --mp-tile:#efe7d4;
    --mp-shadow:rgba(0,0,0,.55); --mp-bar:#1c2623; --mp-accent:#e0664b; --mp-accent-ink:#1c1411;
  }
}
.mp-app *,.mp-app *::before,.mp-app *::after{box-sizing:border-box}

.mp-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; padding:10px 16px;
  background:var(--mp-bar); border-bottom:2px solid var(--mp-edge)}
.mp-title{margin:0 auto 0 0; font:600 1.35rem/1 Fraunces,Georgia,serif; letter-spacing:.01em}
.mp-count{font-size:.9rem; opacity:.75; transition:color .2s}
.mp-count.mp-full{color:var(--mp-accent); opacity:1; font-weight:700}
.mp-add{display:flex; gap:6px; margin:0}
.mp-input{font:inherit; font-size:1rem; width:11rem; max-width:42vw; padding:7px 10px;
  border:2px solid var(--mp-edge); border-radius:6px; background:var(--mp-tile); color:var(--mp-tile-ink)}
.mp-btn{font:inherit; font-weight:700; font-size:.95rem; padding:7px 13px; border-radius:6px; cursor:pointer;
  border:2px solid var(--mp-ink); background:transparent; color:var(--mp-ink)}
.mp-primary{background:var(--mp-accent); border-color:var(--mp-accent); color:var(--mp-accent-ink)}
.mp-btn:hover{filter:brightness(1.08)}
.mp-app :is(.mp-btn,.mp-input):focus-visible{outline:3px solid var(--mp-accent); outline-offset:2px}

.mp-board{position:relative; flex:1; overflow:hidden; touch-action:none;
  background:radial-gradient(ellipse at 20% 0%,rgba(255,255,255,.28),transparent 55%),var(--mp-door)}
.mp-hint{position:absolute; right:14px; bottom:12px; margin:0; font-size:.82rem; opacity:.65;
  text-align:right; pointer-events:none}

.mp-tile{position:absolute; left:0; top:0; padding:.28em .6em .32em; background:var(--mp-tile);
  color:var(--mp-tile-ink); font-size:1.15rem; line-height:1.2; border-radius:3px; white-space:nowrap;
  cursor:grab; user-select:none; -webkit-user-select:none; touch-action:none;
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 2px 3px var(--mp-shadow);
  transition:box-shadow .12s,scale .12s}
.mp-tile.mp-drag{cursor:grabbing; scale:1.08; box-shadow:0 10px 16px var(--mp-shadow)}
.mp-tile.mp-mine{border-bottom:3px solid var(--mp-accent)}

@media (max-width:520px){
  .mp-tile{font-size:1rem}
  .mp-title{font-size:1.15rem}
}