a{color:black;text-decoration:grey wavy underline;}
a:visited{color:black;text-decoration:grey wavy underline;}
.shake {max-height:42vw;max-width:42vw;font-size:40vw;cursor:grab;display:inline-block;transform-origin:center center;width:201px;height:201px;background:#E8E3D1;margin-left:12px;margin-right:12px;}@keyframes shake {2%{transform:translate(0, 0) rotate(0.5deg)}4%{transform:translate(0, 0) rotate(-4.5deg)}6%{transform:translate(0, 0) rotate(7.5deg)}8%{transform:translate(0, 0) rotate(-2.5deg)}10%{transform:translate(0, 0) rotate(0.5deg)}12%{transform:translate(0, 0) rotate(3.5deg)}14%{transform:translate(0, 0) rotate(5.5deg)}16%{transform:translate(0, 0) rotate(1.5deg)}18%{transform:translate(0, 0) rotate(4.5deg)}20%{transform:translate(0, 0) rotate(4.5deg)}22%{transform:translate(0, 0) rotate(-6.5deg)}24%{transform:translate(0, 0) rotate(5.5deg)}26%{transform:translate(0, 0) rotate(5.5deg)}28%{transform:translate(0, 0) rotate(-4.5deg)}30%{transform:translate(0, 0) rotate(6.5deg)}32%{transform:translate(0, 0) rotate(-0.5deg)}34%{transform:translate(0, 0) rotate(-2.5deg)}36%{transform:translate(0, 0) rotate(0.5deg)}38%{transform:translate(0, 0) rotate(2.5deg)}40%{transform:translate(0, 0) rotate(-3.5deg)}42%{transform:translate(0, 0) rotate(6.5deg)}44%{transform:translate(0, 0) rotate(1.5deg)}46%{transform:translate(0, 0) rotate(2.5deg)}48%{transform:translate(0, 0) rotate(-5.5deg)}50%{transform:translate(0, 0) rotate(-4.5deg)}52%{transform:translate(0, 0) rotate(0.5deg)}54%{transform:translate(0, 0) rotate(6.5deg)}56%{transform:translate(0, 0) rotate(6.5deg)}58%{transform:translate(0, 0) rotate(3.5deg)}60%{transform:translate(0, 0) rotate(-1.5deg)}62%{transform:translate(0, 0) rotate(-2.5deg)}64%{transform:translate(0, 0) rotate(1.5deg)}66%{transform:translate(0, 0) rotate(-1.5deg)}68%{transform:translate(0, 0) rotate(-3.5deg)}70%{transform:translate(0, 0) rotate(3.5deg)}72%{transform:translate(0, 0) rotate(0.5deg)}74%{transform:translate(0, 0) rotate(4.5deg)}76%{transform:translate(0, 0) rotate(2.5deg)}78%{transform:translate(0, 0) rotate(5.5deg)}80%{transform:translate(0, 0) rotate(4.5deg)}82%{transform:translate(0, 0) rotate(-0.5deg)}84%{transform:translate(0, 0) rotate(-5.5deg)}86%{transform:translate(0, 0) rotate(-0.5deg)}88%{transform:translate(0, 0) rotate(0.5deg)}90%{transform:translate(0, 0) rotate(3.5deg)}92%{transform:translate(0, 0) rotate(-3.5deg)}94%{transform:translate(0, 0) rotate(7.5deg)}96%{transform:translate(0, 0) rotate(2.5deg)}98%{transform:translate(0, 0) rotate(3.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake {animation:shake 1600ms ease-in-out 1}
.shake-rot{max-height:42vw;max-width:42vw;font-size:40vw;cursor:grab;display:inline-block;transform-origin:center center;width:201px;height:201px;background:#E8E3D1;margin-left:12px;margin-right:12px;}@keyframes shake-rot{2%{transform:translate(0, 0) rotate(-0.7deg)}4%{transform:translate(0, 0) rotate(-2.5deg)}6%{transform:translate(0, 0) rotate(3.5deg)}8%{transform:translate(0, 0) rotate(7.5deg)}10%{transform:translate(0, 0) rotate(1.5deg)}12%{transform:translate(0, 0) rotate(6.5deg)}14%{transform:translate(0, 0) rotate(-2.5deg)}16%{transform:translate(0, 0) rotate(2.5deg)}18%{transform:translate(0, 0) rotate(7.5deg)}20%{transform:translate(0, 0) rotate(-0.5deg)}22%{transform:translate(0, 0) rotate(6.5deg)}24%{transform:translate(0, 0) rotate(6.5deg)}26%{transform:translate(0, 0) rotate(-3.5deg)}28%{transform:translate(0, 0) rotate(3.5deg)}30%{transform:translate(0, 0) rotate(-1.5deg)}32%{transform:translate(0, 0) rotate(0.5deg)}34%{transform:translate(0, 0) rotate(4.5deg)}36%{transform:translate(0, 0) rotate(4.5deg)}38%{transform:translate(0, 0) rotate(-1.5deg)}40%{transform:translate(0, 0) rotate(-7.5deg)}42%{transform:translate(0, 0) rotate(5.5deg)}44%{transform:translate(0, 0) rotate(4.5deg)}46%{transform:translate(0, 0) rotate(7.5deg)}48%{transform:translate(0, 0) rotate(-2.5deg)}50%{transform:translate(0, 0) rotate(3.5deg)}52%{transform:translate(0, 0) rotate(7.5deg)}54%{transform:translate(0, 0) rotate(-2.5deg)}56%{transform:translate(0, 0) rotate(4.5deg)}58%{transform:translate(0, 0) rotate(-4.5deg)}60%{transform:translate(0, 0) rotate(-1.5deg)}62%{transform:translate(0, 0) rotate(-5.5deg)}64%{transform:translate(0, 0) rotate(0.5deg)}66%{transform:translate(0, 0) rotate(5.5deg)}68%{transform:translate(0, 0) rotate(5.5deg)}70%{transform:translate(0, 0) rotate(7.5deg)}72%{transform:translate(0, 0) rotate(-4.5deg)}74%{transform:translate(0, 0) rotate(-4.5deg)}76%{transform:translate(0, 0) rotate(-2.5deg)}78%{transform:translate(0, 0) rotate(7.5deg)}80%{transform:translate(0, 0) rotate(-3.5deg)}82%{transform:translate(0, 0) rotate(2.5deg)}84%{transform:translate(0, 0) rotate(6.5deg)}86%{transform:translate(0, 0) rotate(1.5deg)}88%{transform:translate(0, 0) rotate(1.5deg)}90%{transform:translate(0, 0) rotate(6.5deg)}92%{transform:translate(0, 0) rotate(-5.5deg)}94%{transform:translate(0, 0) rotate(-7.5deg)}96%{transform:translate(0, 0) rotate(-3.5deg)}98%{transform:translate(0, 0) rotate(-2.5deg)}0%,100%{transform:translate(0, 0) rotate(0)}}.shake-rot {animation:shake-rot 1600ms ease-in-out 1}
.qqq{max-height:42vw;max-width:42vw;font-size:40vw;cursor:grabbing;display:inline-block;transform-origin:center center;width:201px;height:201px;background:#E8E3D1;margin-left:12px;margin-right:12px;margin-bottom:0px;margin-top:0px;}
body {overflow-x:hidden;background:#E8E3D1;font-family:calibri;font-size:12pt;}
h1 {vertical-align:top;display:inline-block;color:#494D56;font-family:calibri;font-style:normal;font-weight: 400;font-size:34pt;margin-top:0px;margin-bottom:0px;}
h2 {color:#083442;font-family:calibri;font-size:22pt;margin-top:20px;font-style:italic;font-weight: 400;margin-left:5px;margin-right:5px;}
button {font-size:28pt;cursor:grabbing;}
button:active {cursor:grab;}
.res {margin:0px;display:inline;visibility:hidden;border:1px dashed #E8E3D1;background:#E8E3D1;padding:5px;font-size:16pt;color:#E8E3D1;}
.menu {font-size:12pt;border:1px solid #A9ADB6;padding:5px 10px 5px 10px;}
nav {display:table;position:relative;text-align:center;font-size:12pt;border:1px solid #A9ADB6;width:98%;max-width:538px;padding:5px 3px 5px 3px;margin-top:-6px;margin-bottom:-5px;} 
nav span {display:table-cell;text-align:center;vertical-align:middle;}
.inner {display:block;width:201px;color:#083442;margin-top:0px;max-width:100%;font-size: clamp(50pt, 95pt, 190pt);text-alighn:left;}
.innerany {display:block;width:201px;margin-top:24%;color:#083442;max-width:100%;font-size:50pt;text-alight:left;}
img {cursor:grabbing;height:auto;max-width:100%;}
img:active {cursor:grab;height:auto;max-width:100%;}
.qqq {cursor:grabbing;max-height:42vw;max-width:42vw;font-size:40vw;}
.qqq:active {cursor:grab;max-height:42vw;max-width:42vw;font-size:40vw;}
.qqqp {cursor:grabbing;font-size:75pt;}
.qqqp:active {cursor:grab;font-size:75pt;}
.logo {cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:14px;'><text y='30%'>🔮</text></svg>") 12 0,wait;}
.logo:active {cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='40' height='48' viewport='0 0 100 100' style='fill:black;font-size:14px;'><text y='30%'>🔮</text></svg>") 12 0,wait;}

.animate {
    transition: transform 3s ease-in;
      animation: whirlwind-animation 3s infinite linear;
    }

    @keyframes whirlwind-animation {
      0% {
        transform: rotate(0deg) scale(1) ;
        opacity: 1;
      }
      
  
      100% {
        transform: rotate(3000deg) scale(0);opacity: 0.2;
        
      }
    }

    logo {
      transform: translate(-80%, -80%);
    }
    .whirl {position: fixed;
    cursor:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'  width='36' height='44' viewport='0 0 100 100' style='fill:black;font-size:17px;'><text y='40%'>📍🗺️️</text></svg>") 16 0,none;
  top: 12px;  
  right: 12px;  
  z-index: 999; 
    font-size: 24px;
    transition: transform 15s ease;}
    
 .flash-overlay {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: white;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease;
}

.flash-active {
  opacity: 1;
  animation: flashFade 2s ease forwards, rainbow 3s ease-in-out;
}

@keyframes flashFade {
  0% { opacity: 1; }
  100% { opacity: 0.99; }
}

@keyframes rainbow {
  0%   { background-color: blue; }
  20%  { background-color: black; }
  40%  { background-color: #00008B; }
  60%  { background-color: black; }
  80%  { background-color: #00008B; }
  85%  { background-color: red; }
  90%  { background-color: black; }
  100% { background-color: white; }
}
    

/* 2026 content expansion: readable stories and compact illustrations */
.dice-article.story-page{
  --ink:#083442; --paper:#E8E3D1; --muted:#5b6a6a;
  color:var(--ink); background:transparent; width:94%; max-width:728px;
  margin:10px auto 18px; padding:10px; border:1px solid #A9ADB6;
  text-align:left; box-sizing:border-box;
}
.dice-article.story-page:after{content:"";display:block;clear:both}
.dice-article.story-page h2{margin:.55em 0 .35em;line-height:1.15;text-align:left}
.dice-article.story-page h3{margin:1.1em 0 .3em;text-align:left}
.dice-article.story-page p{line-height:1.62;margin:.58em 0;text-align:justify}
.dice-article.story-page ul{line-height:1.55;padding-left:1.25em;text-align:left}
.dice-article.story-page .lede{font-size:1.08rem}
.dice-article.story-page .tiny-note{font-size:.92rem;color:var(--muted)}
.dice-article.story-page figure.float-figure{
  float:right; width:min(42%,300px); margin:4px 0 12px 18px; text-align:center;
}
.dice-article.story-page figure.mini-figure{
  float:right; width:min(35%,235px); margin:4px 0 10px 16px; text-align:center;
}
.dice-article.story-page figure img{display:block;width:100%;height:auto;max-height:360px;object-fit:contain;border-radius:10px;cursor:default}
.dice-article.story-page figcaption{font-size:.82rem;line-height:1.3;color:var(--muted);margin-top:5px;text-align:center}
.dice-article.story-page .story-box{background:#f7f3e7;border:1px dashed #9da39b;border-radius:10px;padding:10px 12px;margin:12px 0}
.dice-article.story-page .quick-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0}
.dice-article.story-page .quick-grid div{background:#f7f3e7;border:1px solid #08344222;border-radius:10px;padding:10px}
.dice-article.story-page .links{clear:both;padding-top:4px}

/* Keep older D3/D4/D12/D100 illustrations from becoming a whole second screen. */
#d-main figure img,.dice-article figure img{max-width:520px;max-height:480px;object-fit:contain;margin-left:auto;margin-right:auto}

@media (max-width:620px){
  .dice-article.story-page figure.float-figure,
  .dice-article.story-page figure.mini-figure{float:none;width:min(82%,360px);margin:12px auto}
  .dice-article.story-page p{text-align:left}
}


/* 2026 article visual unification */
#d-main, .dice-article{
  box-sizing:border-box;
  border-radius:12px;
  background:rgba(247,243,231,.24);
  overflow:visible;
}
#d-main:after, .dice-article:after{content:"";display:block;clear:both}
#d-main > h2:first-child, .dice-article > h2:first-child{
  font-size:1.45rem;line-height:1.2;margin:.25em 0 .5em;text-align:left;
}
#d-main h2, .dice-article h2{
  line-height:1.22;text-align:left;
}
#d-main h3, .dice-article h3{line-height:1.25;text-align:left}
#d-main ul, #d-main ol, .dice-article ul, .dice-article ol{
  line-height:1.58;text-align:left;padding-left:1.35em;
}
#d-main li, .dice-article li{margin:.28em 0}
#d-main .toc, .dice-article .toc{line-height:1.65}

/* Older long-form pages now use the same compact image rhythm as new stories. */
#d-main:not(.story-page) > figure:first-of-type,
.dice-article:not(.story-page) > figure:first-of-type{
  float:right;width:min(40%,280px);margin:4px 0 14px 18px;
  padding:8px;background:#f7f3e7;border:1px solid #08344222;border-radius:12px;
  box-sizing:border-box;
}
#d-main:not(.story-page) > figure:first-of-type img,
.dice-article:not(.story-page) > figure:first-of-type img{
  display:block;width:100%;max-width:100%;max-height:310px;object-fit:contain;margin:0 auto;border-radius:8px;
}
#d-main:not(.story-page) > figure:first-of-type figcaption,
.dice-article:not(.story-page) > figure:first-of-type figcaption{
  font-size:.82rem;line-height:1.35;margin-top:6px;text-align:center;color:#5b6a6a;
}

/* D12 had its own tool-card layout; keep the content but make it match the rest. */
#d-main .other-tools, .dice-article .other-tools{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:10px;margin:12px 0;
}
#d-main .other-tools .card, .dice-article .other-tools .card{
  display:block;color:#083442;text-decoration:none;background:#f7f3e7;
  border:1px solid #08344222;border-radius:10px;padding:10px;box-sizing:border-box;
}
#d-main .other-tools .card:hover, .dice-article .other-tools .card:hover{
  background:#fff9ee;border-color:#08344255;
}
#d-main .other-tools .card h3, .dice-article .other-tools .card h3{margin:0 0 .3em}
#d-main .other-tools .card p, .dice-article .other-tools .card p{margin:.25em 0}

/* One consistent ending on article pages. */
#d-main .article-actions, .dice-article .article-actions{
  clear:both;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;
  margin:20px 0 2px;padding-top:14px;border-top:1px solid #A9ADB6;
}
#d-main .article-actions a, .dice-article .article-actions a{
  display:inline-block;min-width:112px;padding:8px 12px;box-sizing:border-box;
  border:1px solid #083442;border-radius:10px;background:#E8E3D1;color:#083442;
  text-align:center;text-decoration:none;font-size:.95rem;line-height:1.2;
}
#d-main .article-actions a:hover, .dice-article .article-actions a:hover{background:#fff9ee}
#d-main .article-actions a.roll-again, .dice-article .article-actions a.roll-again{font-weight:700}

@media (max-width:620px){
  #d-main, .dice-article{width:94%;padding:10px}
  #d-main:not(.story-page) > figure:first-of-type,
  .dice-article:not(.story-page) > figure:first-of-type{
    float:none;width:min(84%,340px);margin:12px auto;
  }
  #d-main p, .dice-article p{text-align:left}
  #d-main .article-actions a, .dice-article .article-actions a{flex:1 1 125px;min-width:0}
}