@font-face{font-family:equity;src:url(../fonts/Equity-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:equity;src:url(../fonts/Equity-Italic.woff2)format("woff2");font-weight:400;font-style:italic;font-display:swap}@font-face{font-family:equity;src:url(../fonts/Equity-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}@font-face{font-family:equity;src:url(../fonts/Equity-BoldItalic.woff2)format("woff2");font-weight:700;font-style:italic;font-display:swap}@font-face{font-family:equitycaps;src:url(../fonts/EquityCaps-Regular.woff2)format("woff2");font-weight:400;font-style:normal;font-display:swap}@font-face{font-family:equitycaps;src:url(../fonts/EquityCaps-Bold.woff2)format("woff2");font-weight:700;font-style:normal;font-display:swap}:root{--font-text:"Equity", serif;--font-text-caps:"EquityCaps", serif;--font-mono:monospace;--font-scale:0.15vw;--font-size-xxs:1.04rem;--font-size-xs:1.25rem;--font-size-s:1.5rem;--font-size-b:calc(10px + var(--font-scale));--font-size-m:1.8rem;--font-size-l:2.16rem;--font-size-xl:2.59rem;--font-size-xxl:3.11rem;--space-eighth:calc(var(--space-base) / 8);--space-quarter:calc(var(--space-base) / 4);--space-half:calc(var(--space-base) / 2);--space-base:1.25em;--space-sesqui:calc(var(--space-base) * 1.5);--space-double:calc(var(--space-base) * 2);--space-triple:calc(var(--space-base) * 3);--space-quadruple:calc(var(--space-base) * 4);--width-page:72rem;--padding-page:calc(var(--space-base) * 1.25);--hex-paper-25:#FFFCF0;--hex-paper-50:#F2F0E5;--hex-paper-100:#E6E4D9;--hex-paper-150:#DAD8CE;--hex-paper-200:#CECDC3;--hex-paper-300:#B7B5AC;--hex-paper-400:#9F9D96;--hex-paper-500:#878580;--hex-paper-600:#6F6E69;--hex-paper-700:#575653;--hex-paper-800:#403E3C;--hex-paper-850:#343331;--hex-paper-900:#282726;--hex-paper-950:#1C1B1A;--hex-paper-1000:#100F0F;--hex-base-25:#FBFBFB;--hex-base-50:#EFEFEF;--hex-base-100:#E3E3E3;--hex-base-150:#D7D7D7;--hex-base-200:#CCCCCC;--hex-base-300:#B4B4B4;--hex-base-400:#9C9C9C;--hex-base-500:#858585;--hex-base-600:#6D6D6D;--hex-base-700:#555555;--hex-base-800:#3E3E3E;--hex-base-850:#333333;--hex-base-900:#272727;--hex-base-950:#1B1B1B;--hex-base-1000:#0F0F0F;--hex-red-25:#FFF8F3;--hex-red-50:#FFE1D5;--hex-red-100:#FFCABB;--hex-red-150:#FDB2A2;--hex-red-200:#F89A8A;--hex-red-300:#E8705F;--hex-red-400:#D14D41;--hex-red-500:#C03E35;--hex-red-600:#AF3029;--hex-red-700:#942822;--hex-red-800:#6C201C;--hex-red-850:#551B18;--hex-red-900:#3E1715;--hex-red-950:#261312;--hex-orange-25:#FFF6F0;--hex-orange-50:#FFE7CE;--hex-orange-100:#FED3AF;--hex-orange-150:#FCC192;--hex-orange-200:#F9AE77;--hex-orange-300:#EC8B49;--hex-orange-400:#DA702C;--hex-orange-500:#CB6120;--hex-orange-600:#BC5215;--hex-orange-700:#9D4310;--hex-orange-800:#71320D;--hex-orange-850:#59290D;--hex-orange-900:#40200D;--hex-orange-950:#27180E;--hex-yellow-25:#FDF9F0;--hex-yellow-50:#FAEEC6;--hex-yellow-100:#F6E2A0;--hex-yellow-150:#F1D67E;--hex-yellow-200:#ECCB60;--hex-yellow-300:#DFB431;--hex-yellow-400:#D0A215;--hex-yellow-500:#BE9207;--hex-yellow-600:#AD8301;--hex-yellow-700:#8E6B01;--hex-yellow-800:#664D01;--hex-yellow-850:#503D02;--hex-yellow-900:#3A2D04;--hex-yellow-950:#241E08;--hex-green-25:#F7F9F0;--hex-green-50:#EDEECF;--hex-green-100:#DDE2B2;--hex-green-150:#CDD597;--hex-green-200:#BEC97E;--hex-green-300:#A0AF54;--hex-green-400:#879A39;--hex-green-500:#768D21;--hex-green-600:#66800B;--hex-green-700:#536907;--hex-green-800:#3D4C07;--hex-green-850:#313D07;--hex-green-900:#252D09;--hex-green-950:#1A1E0C;--hex-cyan-25:#F2F9F5;--hex-cyan-50:#DDF1E4;--hex-cyan-100:#BFE8D9;--hex-cyan-150:#A2DECE;--hex-cyan-200:#87D3C3;--hex-cyan-300:#5ABDAC;--hex-cyan-400:#3AA99F;--hex-cyan-500:#2F968D;--hex-cyan-600:#24837B;--hex-cyan-700:#1C6C66;--hex-cyan-800:#164F4A;--hex-cyan-850:#143F3C;--hex-cyan-900:#122F2C;--hex-cyan-950:#101F1D;--hex-blue-25:#F0F5F7;--hex-blue-50:#E1ECEB;--hex-blue-100:#C6DDE8;--hex-blue-150:#ABCFE2;--hex-blue-200:#92BFDB;--hex-blue-300:#66A0C8;--hex-blue-400:#4385BE;--hex-blue-500:#3171B2;--hex-blue-600:#205EA6;--hex-blue-700:#1A4F8C;--hex-blue-800:#163B66;--hex-blue-850:#133051;--hex-blue-900:#12253B;--hex-blue-950:#101A24;--hex-purple-25:#F7F5F8;--hex-purple-50:#F0EAEC;--hex-purple-100:#E2D9E9;--hex-purple-150:#D3CAE6;--hex-purple-200:#C4B9E0;--hex-purple-300:#A699D0;--hex-purple-400:#8B7EC8;--hex-purple-500:#735EB5;--hex-purple-600:#5E409D;--hex-purple-700:#4F3685;--hex-purple-800:#3C2A62;--hex-purple-850:#31234E;--hex-purple-900:#261C39;--hex-purple-950:#1A1623;--hex-magenta-25:#FFF3F5;--hex-magenta-50:#FEE4E5;--hex-magenta-100:#FCCFDA;--hex-magenta-150:#F9B9CF;--hex-magenta-200:#F4A4C2;--hex-magenta-300:#E47DA8;--hex-magenta-400:#CE5D97;--hex-magenta-500:#B74583;--hex-magenta-600:#A02F6F;--hex-magenta-700:#87285E;--hex-magenta-800:#641F46;--hex-magenta-850:#4F1B39;--hex-magenta-900:#39172B;--hex-magenta-950:#24131D;--color-bg:var(--hex-paper-25);--color-bg-2:var(--hex-paper-50);--color-ui:var(--hex-paper-100);--color-ui-2:var(--hex-paper-150);--color-ui-3:var(--hex-paper-200);--color-tx:var(--hex-paper-1000);--color-tx-2:var(--hex-paper-600);--color-tx-3:var(--hex-paper-300);--accent-bg:var(--hex-paper-25);--accent-bg-2:var(--hex-paper-50);--accent-ui:var(--hex-paper-100);--accent-ui-2:var(--hex-paper-150);--accent-ui-3:var(--hex-paper-200);--accent-tx:var(--hex-magenta-700);--accent-tx-2:var(--hex-magenta-600);--accent-tx-3:var(--hex-magenta-300);--accent-ia:var(--hex-magenta-600);--accent-ia-2:var(--hex-magenta-400);--accent-hi:var(--hex-yellow-400);--color-re:var(--hex-red-600);--color-re-2:var(--hex-red-400);--color-or:var(--hex-orange-600);--color-or-2:var(--hex-orange-400);--color-ye:var(--hex-yellow-600);--color-ye-2:var(--hex-yellow-400);--color-gr:var(--hex-green-600);--color-gr-2:var(--hex-green-400);--color-cy:var(--hex-cyan-600);--color-cy-2:var(--hex-cyan-400);--color-bl:var(--hex-blue-600);--color-bl-2:var(--hex-blue-400);--color-pu:var(--hex-purple-600);--color-pu-2:var(--hex-purple-400);--color-ma:var(--hex-magenta-600);--color-ma-2:var(--hex-magenta-400)}@media screen and (max-width:40em){:root{--font-scale:0.05vw}}@media print{:root{--font-scale:0.05vw}body{background-color:#fff !important}}body.season-active.season-winter{--color-bg:var(--hex-base-25);--color-bg-2:var(--hex-base-50);--color-ui:var(--hex-base-100);--color-ui-2:var(--hex-base-150);--color-ui-3:var(--hex-base-200);--color-tx:var(--hex-base-1000);--color-tx-2:var(--hex-base-600);--color-tx-3:var(--hex-base-300);--accent-bg:var(--hex-base-25);--accent-bg-2:var(--hex-base-50);--accent-ui:var(--hex-base-100);--accent-ui-2:var(--hex-base-150);--accent-ui-3:var(--hex-base-200);--accent-tx:var(--hex-red-700);--accent-tx-2:var(--hex-red-600);--accent-tx-3:var(--hex-red-300);--accent-ia:var(--hex-green-600);--accent-ia-2:var(--hex-green-400);--accent-hi:var(--hex-red-400)}body.season-active.season-halloween{--color-bg:var(--hex-base-1000);--color-bg-2:var(--hex-base-950);--color-ui:var(--hex-base-900);--color-ui-2:var(--hex-base-850);--color-ui-3:var(--hex-base-800);--color-tx:var(--hex-base-200);--color-tx-2:var(--hex-base-500);--color-tx-3:var(--hex-base-700);--accent-bg:var(--hex-purple-950);--accent-bg-2:var(--hex-purple-900);--accent-ui:var(--hex-purple-800);--accent-ui-2:var(--hex-purple-700);--accent-ui-3:var(--hex-purple-600);--accent-tx:var(--hex-base-300);--accent-tx-2:var(--hex-purple-400);--accent-tx-3:var(--hex-purple-300);--accent-ia:var(--hex-orange-600);--accent-ia-2:var(--hex-orange-500);--accent-hi:var(--hex-orange-600)}*,*::before,*::after{box-sizing:border-box}html,body{margin:0}html{font-family:var(--font-text);font-size:var(--font-size-b);line-height:1.45}body{font-size:var(--font-size-m);padding:0 0 calc(var(--space-base) * 5);margin:env(safe-area-inset-top)env(safe-area-inset-right)env(safe-area-inset-bottom)env(safe-area-inset-left);background-color:var(--color-bg);color:var(--color-tx)}h1,h2,h3,h4,h5,h6{margin:0}h1{font-size:var(--font-size-xxl);line-height:1.15;margin-top:var(--double-space);margin-bottom:var(--base-space)}h2{font-size:var(--font-size-xl);line-height:1.1;margin-top:calc(var(--base-space) * 1.5);margin-bottom:var(--base-space)}h3{font-size:var(--font-size-l);line-height:1.15;margin-top:var(--base-space);margin-bottom:var(--half-space)}h4{font-size:var(--font-size-m);line-height:1.2;margin-top:var(--base-space);margin-bottom:var(--half-space)}h5{font-size:var(--font-size-s);line-height:1.25;margin-top:var(--half-space);margin-bottom:var(--quarter-space)}h6{font-size:var(--font-size-xs);line-height:1.3;margin-top:var(--half-space);margin-bottom:var(--quarter-space)}a{color:var(--color-tx);text-decoration-color:var(--color-tx-3);text-decoration-thickness:2px;text-underline-offset:2px}a:hover{color:var(--color-cy)}figure{margin:var(--base-space)0;border:.1rem solid var(--color-ui)}figure img{display:block;width:100%;height:auto}figure figcaption{font-size:var(--font-size-small);text-align:center;background-color:var(--color-bg);padding:var(--half-space);border-top:.1rem solid var(--color-ui);font-weight:700}table{border-collapse:collapse;width:100%;font-size:var(--font-size-small)}thead th{background-color:var(--color-bg-2);padding:8px 12px;text-align:left;font-weight:700}tbody td{border-top:.1rem solid var(--color-ui);padding:8px 12px;vertical-align:top}tbody tr:hover{background-color:var(--color-bg-2)}.table{overflow-x:auto}blockquote{margin:var(--base-space)0;padding:var(--base-space);border:1px solid var(--color-ui);background-color:var(--color-bg-2)}blockquote>*:first-child{margin-top:0}blockquote>*:last-child{margin-bottom:0}sup{vertical-align:super;font-size:var(--font-size-x-small);line-height:.3}sub{vertical-align:sub;font-size:var(--font-size-x-small);line-height:.3}.hidden{display:none !important}.noselect{-webkit-touch-callout:none;-webkit-user-select:none;-khtml-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.noscroll{overflow:hidden}.headline{max-width:var(--width-page);margin:var(--space-base)auto;padding:var(--padding-page)var(--padding-page)0;text-align:center;h1 { font-size: var(--font-size-xxl); color: var(--accent-tx); } .edition { padding: var(--space-eighth) var(--space-half); border-radius: var(--space-quadruple); background: var(--color-bg-2); color: var(--accent-tx-2); font-family: var(--font-text-caps); font-size: var(--font-size-s); white-space: nowrap; display: inline-block; margin-bottom: var(--space-half); } .description { color: var(--color-tx-2); font-style: italic; p { margin: var(--space-half) 0; } }}.roulette{margin:0 auto;text-align:center;padding:0 var(--padding-page);.controls { display: flex; flex-direction: column; align-items: center; gap: var(--space-half); } .options { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-half); font-size: var(--font-size-s); label { cursor: pointer; display: flex; align-items: center; gap: var(--space-quarter); padding: var(--space-quarter) var(--space-half); border: 2px solid var(--color-ui); background-color: var(--color-bg-2); border-radius: var(--space-quarter); cursor: pointer; &:hover { border-color: var(--color-ui-2); } &:has(input:checked) { border-color: var(--color-ui-3); } } input { accent-color: var(--accent-ia); } } .notice { margin: 0; font-size: var(--font-size-xs); color: var(--color-tx-3); } .tray { background-color: var(--color-bg); position: fixed; inset: auto 0 0 0; z-index: 100; box-shadow: 0 0 20px rgba(0, 0, 0, 0.25); @media (min-width: 640px) { inset: auto auto var(--space-base); border-radius: var(--space-quarter); } } .timer { padding: var(--space-quarter) var(--space-base); font-family: var(--font-mono); font-size: var(--font-size-xs); border-bottom: 2px solid var(--color-ui); } .buttons { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-half); flex-wrap: wrap; justify-content: center; padding: var(--space-half) var(--space-base); button { padding: var(--space-half) var(--space-base); font-size: var(--font-size-s); border: none; border-radius: var(--space-quarter); min-width: calc(var(--space-quadruple) * 1.5); cursor: pointer; transition: background 0.3s ease; font-family: var(--font-family); &:hover { background: var(--accent-ia-2); } } #spinButton { background: var(--color-gr); color: var(--color-bg); &:hover { background: var(--color-gr-2); } &.alert { background: var(--color-re); &:hover { background: var(--color-re-2); } } } #spinButton.rolling { animation: spinPulse 0.2s ease-in-out infinite alternate; } #shareButton { background: var(--color-gr); color: var(--color-bg); } #shareButton:hover:enabled { background: var(--color-gr-2); } #shareButton:disabled { background: var(--color-ui); color: var(--color-tx-3); } } .slots { display: grid; grid-template-columns: 1fr; gap: var(--space-base); padding-top: var(--space-double); @media (min-width: 640px) { grid-template-columns: repeat(auto-fit, minmax(350px, 1fr)); } } section { background: var(--accent-bg-2); padding: var(--space-base); border: 2px solid var(--accent-ui-3); transition: transform 0.2s ease; position: relative; overflow: hidden; display: flex; flex-direction: column; border-radius: var(--space-quarter); &:hover { transform: translateY(-4px); } &.rolling { animation: slotPulse 0.4s ease-in-out infinite alternate; } h3 { color: var(--accent-tx-2); flex-shrink: 0; margin-bottom: var(--space-half); } ul { list-style: none; padding: 0; margin: 0; flex-grow: 1; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--space-quarter); } li { position: relative; padding: var(--space-quarter) var(--space-half); background-color: var(--accent-ui); word-wrap: break-word; opacity: 0; animation: fadeIn 0.5s ease forwards; cursor: default; border-radius: var(--space-quarter); display: flex; justify-content: center; align-items: center; font-size: var(--font-size-s); cursor: pointer; &.highlight { background-color: var(--accent-hi); transition: all 0.15s ease-out; } &.selected { background-color: var(--accent-hi); } } }}@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}@keyframes slotPulse{from{border:2px solid var(--accent-ui-3)}to{border:2px solid var(--accent-hi)}}@keyframes spinPulse{from{background:var(--color-gr)}to{background:var(--color-ye)}}.content{width:100%;max-width:var(--width-page);padding:var(--padding-page);margin:0 auto}.modal{display:none;position:fixed;inset:0;backdrop-filter:blur(10px);align-items:center;justify-content:center;z-index:10000;padding:var(--space-base);overflow:auto;.container { background: var(--color-bg-2); max-width: 48rem; max-height: 90vh; position: relative; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3); text-align: center; border-radius: var(--space-quarter); overflow-y: scroll; header { display: flex; justify-content: space-between; padding: var(--space-base); span { font-size: var(--font-size-s); &:first-of-type { font-family: var(--font-text-caps); color: var(--accent-tx); } } } div { padding: 0 var(--space-base) var(--space-base); } .close-button { cursor: pointer; &:hover { opacity: 1; } } } canvas { max-width: 100%; border-radius: var(--space-quarter); margin: 0 0 var(--space-base); border: 2px solid var(--color-ui); } button { padding: var(--space-half) var(--space-base); font-size: var(--font-size-s); border: none; border-radius: var(--space-quarter); min-width: calc(var(--space-quadruple) * 1.5); cursor: pointer; transition: background 0.3s ease; font-family: var(--font-family); background: var(--accent-ia); color: var(--color-bg); &:hover { background: var(--accent-ia-2); } }}.tooltip{position:fixed;background:var(--color-bg);color:var(--color-tx);padding:var(--space-half)var(--space-base);border-radius:var(--space-quarter);font-size:var(--font-size-xs);max-width:280px;word-wrap:break-word;pointer-events:none;opacity:0;visibility:hidden;transition:opacity .2s ease,transform .15s ease;z-index:1000;box-shadow:0 0 20px rgba(0,0,0,.25);transform:translateY(8px);top:0;left:0}.tooltip.visible{opacity:1;visibility:visible;transform:translateY(0)}.tooltip::after{content:"";position:absolute;width:0;height:0;border:8px solid transparent;left:50%;margin-left:-8px}.tooltip.above::after{bottom:-16px;border-top-color:var(--color-bg)}.tooltip.below::after{top:-16px;border-bottom-color:var(--color-bg)}@media(max-width:640px){.tooltip{max-width:220px;font-size:13px}}