:root{--felt: #1e6b46;--felt-deep: #145033;--felt-line: rgba(255, 255, 255, .14);--ivory: #faf7ee;--ivory-side: #d9d2bf;--ink: #1c1c1c;--gold: #e8b93e;--red: #c0392b;--panel: #0e2b1d;--tile-w: 44px}*{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%}body{font-family:Zen Kaku Gothic New,sans-serif;color:var(--ivory);background:radial-gradient(ellipse 90% 80% at 50% 40%,var(--felt) 0%,var(--felt-deep) 100%);overflow:hidden;-webkit-user-select:none;user-select:none}button{font-family:inherit}.title{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:14px;padding:24px;overflow-y:auto}.title__logo{font-family:Shippori Mincho,serif;font-size:clamp(2.4rem,6vw,4rem);letter-spacing:.3em;text-shadow:0 4px 24px rgba(0,0,0,.45)}.title__sub{display:block;font-size:.85rem;letter-spacing:.35em;color:var(--gold);text-align:center;margin-top:6px}.title__lead{opacity:.85;font-size:.9rem}.title__section{margin-top:10px;font-size:.8rem;letter-spacing:.2em;color:var(--gold)}.diff-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:10px;width:min(860px,100%)}.diff{background:#00000040;border:2px solid transparent;border-radius:12px;color:var(--ivory);padding:12px;cursor:pointer;display:flex;flex-direction:column;gap:10px;transition:border-color .2s ease,transform .2s ease}.diff:hover{transform:translateY(-2px)}.diff--on{border-color:var(--gold);background:#e8b93e1f}.diff__label{font-weight:700;font-size:1.05rem}.diff__chars{display:flex;justify-content:center;gap:10px}.diff__char{display:flex;flex-direction:column;align-items:center;gap:4px;font-size:.7rem}.diff__char img,.diff__char-ph{width:44px;height:44px;border-radius:50%;object-fit:cover}.diff__char-ph{display:flex;align-items:center;justify-content:center;background:#ffffff1f;border:1px dashed rgba(255,255,255,.4);font-family:Shippori Mincho,serif;font-size:1.1rem}.len-row{display:flex;gap:10px}.title__note{font-size:.75rem;opacity:.6;margin-top:8px}.act{background:var(--ivory);color:var(--ink);border:none;border-radius:999px;padding:10px 22px;font-size:.95rem;font-weight:700;cursor:pointer;box-shadow:0 3px 10px #00000059;transition:transform .15s ease,background .15s ease}.act:hover{transform:translateY(-2px)}.act--on{background:var(--gold)}.act--win{background:var(--gold);color:#4a2c00}.act--pass{background:#ffffff40;color:var(--ivory)}.act--start{font-size:1.15rem;padding:14px 46px;background:var(--gold);margin-top:8px}.tile{position:relative;display:inline-flex;width:var(--tile-w);aspect-ratio:3 / 4.2;border:none;border-radius:5px;padding:0;background:linear-gradient(160deg,#ffffff 0%,var(--ivory) 55%,#eee7d6 100%);box-shadow:inset 0 1px 1px #ffffffe6,0 3px 0 var(--ivory-side),0 5px 6px #00000073;cursor:default}.tile--sm{--tile-w: 28px;width:28px;border-radius:3px;box-shadow:inset 0 1px 1px #ffffffe6,0 2px 0 var(--ivory-side),0 3px 4px #0006}.tile--md{width:34px}.tile--lg{width:var(--tile-w)}.tile--clickable{cursor:pointer;transition:transform .12s ease}.tile--clickable:hover{transform:translateY(-8px)}.tile--selected{transform:translateY(-8px);outline:2px solid var(--gold)}.tile--dimmed{opacity:.35}.tile--back{background:linear-gradient(160deg,#2d5f8a,#1c3f60);box-shadow:inset 0 1px 1px #ffffff40,0 2px #142c44,0 3px 4px #0006}.tile-face{display:block;width:100%;height:100%;padding:6%}.tile-face-svg{width:100%;height:100%;display:block}.table{position:relative;height:100%;display:grid;grid-template-rows:auto 1fr auto}.seat{position:absolute;display:flex;align-items:center;gap:10px}.seat--1{right:10px;top:50%;transform:translateY(-50%);flex-direction:column}.seat--2{top:10px;left:50%;transform:translate(-50%)}.seat--3{left:10px;top:50%;transform:translateY(-50%);flex-direction:column}.seat__hand{display:flex;gap:2px}.seat--1 .seat__hand,.seat--3 .seat__hand{flex-direction:column}.seat--0{position:absolute;bottom:12px;left:50%;transform:translate(-50%);flex-direction:column;gap:8px;width:max-content;max-width:96vw}.hand{display:flex;gap:3px;align-items:flex-end}.hand__drawn{margin-left:14px}.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:center;min-height:44px}.char-slot{display:flex;flex-direction:column;align-items:center;gap:3px}.char-slot__img,.char-slot__placeholder{width:56px;height:56px;border-radius:50%;object-fit:cover;border:2px solid var(--gold)}.char-slot__placeholder{display:flex;align-items:center;justify-content:center;background:#00000059;font-family:Shippori Mincho,serif;font-size:1.3rem;color:var(--gold)}.char-slot__name{font-size:.72rem;letter-spacing:.1em;text-shadow:0 1px 3px rgba(0,0,0,.6)}.melds{display:flex;gap:8px}.meld{display:inline-flex;gap:1px}.rivers{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.river{position:absolute;display:grid;grid-template-columns:repeat(6,28px);grid-auto-rows:41px;gap:2px;width:178px;height:127px;align-content:start;justify-content:start}.river--r0{left:50%;top:calc(50% + 170px);transform:translate(-50%,-50%)}.river--r180{left:50%;top:calc(50% - 170px);transform:translate(-50%,-50%) rotate(180deg)}.river--r270{left:calc(50% + 170px);top:50%;transform:translate(-50%,-50%) rotate(270deg)}.river--r90{left:calc(50% - 170px);top:50%;transform:translate(-50%,-50%) rotate(90deg)}.river-tile--riichi{display:inline-flex;justify-content:center;align-items:center}.river-tile--riichi .tile{transform:rotate(90deg);margin:4px 0;box-shadow:inset 0 1px 1px #ffffffe6,2px 0 0 var(--ivory-side),3px 2px 4px #0006}.riichi-stick{display:inline-block;width:56px;height:8px;border-radius:4px;background:linear-gradient(180deg,#fff,#e8e2d2);box-shadow:0 1px 3px #00000080;position:relative;margin:2px 3px}.riichi-stick__dot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:5px;height:5px;border-radius:50%;background:var(--red)}.center-info{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:176px;height:176px;background:linear-gradient(160deg,var(--panel),#08150e);border:1px solid rgba(232,185,62,.45);border-radius:12px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;box-shadow:0 8px 30px #00000080}.center-info__round{font-family:Shippori Mincho,serif;font-size:1.25rem;letter-spacing:.15em}.center-info__honba{font-size:.75rem;color:var(--gold)}.center-info__wall{font-size:.75rem;opacity:.85}.center-info__wall strong{color:var(--gold);font-size:1rem}.center-info__dora{display:flex;align-items:center;gap:4px;margin-top:2px}.center-info__dora-label{font-size:.65rem;letter-spacing:.2em;color:var(--gold)}.center-info__sticks{font-size:.65rem;color:var(--gold)}.score{position:absolute;display:flex;align-items:center;gap:6px;font-size:.8rem;background:#0000008c;padding:3px 10px;border-radius:999px;white-space:nowrap}.score--0{left:50%;top:calc(100% + 1px);transform:translate(-50%,-50%)}.score--2{left:50%;top:-1px;transform:translate(-50%,-50%)}.score--1{left:calc(100% + 1px);top:50%;transform:translate(-50%,-50%) rotate(90deg)}.score--3{left:-1px;top:50%;transform:translate(-50%,-50%) rotate(-90deg)}.score--active{outline:2px solid var(--gold)}.score__wind{font-family:Shippori Mincho,serif;font-weight:700;color:var(--ivory)}.score__wind--dealer{color:var(--gold)}.score__riichi{color:var(--gold);font-size:.65rem}.callout{position:absolute;z-index:40;font-family:Shippori Mincho,serif;font-size:clamp(2rem,5vw,3.2rem);font-weight:800;color:var(--ivory);background:linear-gradient(160deg,#141414eb,#3c140aeb);border:2px solid var(--gold);border-radius:10px;padding:6px 30px;letter-spacing:.2em;text-shadow:0 2px 8px rgba(0,0,0,.8);animation:callout-pop .9s cubic-bezier(.18,1.4,.4,1) forwards;pointer-events:none}.callout--0{left:50%;bottom:26%;transform:translate(-50%)}.callout--1{right:16%;top:45%}.callout--2{left:50%;top:16%;transform:translate(-50%)}.callout--3{left:16%;top:45%}@keyframes callout-pop{0%{opacity:0;scale:.6}18%{opacity:1;scale:1.08}30%{scale:1}80%{opacity:1}to{opacity:0}}.transition{position:absolute;z-index:50;left:0;right:0;top:50%;transform:translateY(-50%);background:linear-gradient(90deg,transparent,rgba(0,0,0,.82) 22%,rgba(0,0,0,.82) 78%,transparent);padding:22px 0;text-align:center;pointer-events:none;animation:transition-sweep 1.4s ease forwards}.transition__label{font-family:Shippori Mincho,serif;font-size:clamp(1.8rem,5vw,3rem);font-weight:800;letter-spacing:.5em;padding-left:.5em;color:var(--gold);text-shadow:0 2px 12px rgba(0,0,0,.9)}@keyframes transition-sweep{0%{opacity:0;transform:translateY(-50%) scaleX(.7)}15%{opacity:1;transform:translateY(-50%) scaleX(1)}85%{opacity:1}to{opacity:0}}.overlay{position:absolute;top:0;right:0;bottom:0;left:0;z-index:60;background:#0000008c;display:flex;align-items:center;justify-content:center;animation:overlay-in .3s ease}@keyframes overlay-in{0%{opacity:0}to{opacity:1}}.panel{background:linear-gradient(160deg,#142e20,#0a1a11);border:1px solid rgba(232,185,62,.5);border-radius:14px;padding:26px 30px;max-width:min(640px,92vw);max-height:86vh;overflow-y:auto;display:flex;flex-direction:column;gap:14px;align-items:center;box-shadow:0 20px 60px #0009}.panel__title{font-family:Shippori Mincho,serif;font-size:1.3rem;letter-spacing:.1em}.panel__limit{margin-left:12px;color:var(--gold);font-size:1.1rem}.panel__hand{display:flex;flex-wrap:wrap;gap:2px;align-items:center}.panel__wintile{margin-left:10px;outline:2px solid var(--gold);border-radius:4px}.panel__hand .meld{margin-left:10px}.yaku-list{list-style:none;width:100%;max-width:360px;font-size:.9rem}.yaku-list li{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px dashed rgba(255,255,255,.15)}.panel__points{display:flex;gap:14px;align-items:baseline;font-size:.95rem}.panel__points strong{font-size:1.5rem;color:var(--gold)}.panel__note{font-size:.9rem;opacity:.9}.ranking{list-style:none;width:100%;max-width:320px}.ranking li{display:flex;justify-content:space-between;gap:12px;padding:6px 0;border-bottom:1px dashed rgba(255,255,255,.15)}.ranking--me{color:var(--gold);font-weight:700}.ranking__pos{font-family:Shippori Mincho,serif}@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important}}