@charset "utf-8";
/* Midsummer: a summer sky over a meadow, a flower garland, Swedish blue and yellow,
   a butterfly, a bee and a little frog. */
:root[data-theme="midsummer"] {
  --bg: #dcefff; --panel: #fffef8; --ink: #1d3b2a; --muted: #62806d; --line: #d7e9d5;
  --accent: #2f7d4a; --accent-ink: #ffffff; --mover: #f0faea; --die: #ffffff; --die-edge: #f0c419;
  --pip: #1f5fae; --held: #f0c419; --field: #ffffff; --good: #2f7d4a; --bad: #c0392b;
  --title: #1f5fae; --title-font: "Amatic SC", "Comic Sans MS", cursive; --name-font: "Amatic SC", "Comic Sans MS", cursive;
  --radius: 14px; --mark: "🌼";
  --pattern: linear-gradient(#cbe7ff, #eaf6ff 60%, #e9f6dc);
}
[data-theme="midsummer"] body { padding-top: 34px; }
[data-theme="midsummer"] h1 { font-size: 62px; line-height: 1; }
[data-theme="midsummer"] .tray-head .name { font-size: 26px; line-height: 1.1; }
[data-theme="midsummer"] .tray-head .total { font-size: 32px; line-height: 1; }
[data-theme="midsummer"] .sheet thead th { font-size: 20px; }
[data-theme="midsummer"] .sheet tr.total th, [data-theme="midsummer"] .sheet tr.total td { font-size: 24px; }
[data-theme="midsummer"] h2 { font-size: 24px; }
[data-theme="midsummer"] .card { border-width: 2px; }
[data-theme="midsummer"] .die.held { box-shadow: 0 0 0 3px var(--held); }
/* A garland of flowers along the top, and the meadow along the bottom. */
[data-theme="midsummer"] body::before {
  content: ""; position: fixed; top: 0; left: -20px; right: -20px; height: 26px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 12px 13px, #ffe14d 3px, #ffffff 4px 8px, transparent 9px) 0 0 / 72px 26px repeat-x,
    radial-gradient(circle at 36px 15px, #ff8fb3 5px, transparent 6px) 0 0 / 72px 26px repeat-x,
    radial-gradient(circle at 60px 13px, #7fb3ff 5px, transparent 6px) 0 0 / 72px 26px repeat-x,
    linear-gradient(#4f9a5b, #4f9a5b) 0 12px / 100% 3px repeat-x;
  transform-origin: 50% 0; animation: garland 6s ease-in-out infinite;
}
@keyframes garland { 50% { transform: translateY(2px) skewX(2deg); } }
[data-theme="midsummer"] body::after {
  content: ""; position: fixed; left: 0; right: 0; bottom: 0; height: 60px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(circle at 20px 30px, #fff 3px, transparent 4px) 0 0 / 70px 60px,
    radial-gradient(circle at 50px 44px, #ffe14d 3px, transparent 4px) 0 0 / 90px 60px,
    radial-gradient(ellipse 70% 100% at 25% 100%, #8fcf7a, transparent 70%),
    radial-gradient(ellipse 60% 100% at 80% 100%, #7cc069, transparent 70%);
}
[data-theme="midsummer"] .ambient .a1 { display: block; top: 30%; left: -40px; font-size: 28px; animation: butterfly 22s ease-in-out infinite 2s; }
[data-theme="midsummer"] .ambient .a1::before { content: "🦋"; display: inline-block; animation: flutter .25s ease-in-out infinite alternate; }
@keyframes butterfly {
  0% { transform: translate(0, 0); } 10% { transform: translate(20vw, -60px); } 20% { transform: translate(40vw, 30px); }
  30% { transform: translate(60vw, -40px); } 40%, 100% { transform: translate(calc(100vw + 80px), 10px); }
}
@keyframes flutter { to { transform: scaleX(.6); } }
[data-theme="midsummer"] .ambient .a2 { display: block; top: 10%; right: 8%; font-size: 20px; animation: bee 5s ease-in-out infinite; }
[data-theme="midsummer"] .ambient .a2::before { content: "🐝"; }
@keyframes bee { 25% { transform: translate(-30px, 12px); } 50% { transform: translate(-10px, -14px); } 75% { transform: translate(20px, 10px); } }
[data-theme="midsummer"] .ambient .a3 { display: block; bottom: 10px; right: -40px; font-size: 26px; animation: frog 16s linear infinite 5s; }
[data-theme="midsummer"] .ambient .a3::before { content: "🐸"; display: inline-block; animation: frog-hop .7s ease-in-out infinite; }
@keyframes frog { 0% { transform: translateX(0); } 40%, 100% { transform: translateX(calc(-100vw - 80px)); } }
@keyframes frog-hop { 40% { transform: translateY(-18px); } 80% { transform: translateY(0); } }