テーマ切替版（古代エジプト / 中世ヨーロッパ / 戦国時代 / 中華）

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>合戦一覧 – 斬撃クリック＆場別バッジ</title>
<style>
  :root{ --bg:#07090d; --paper:#f0ead8; --icon:#dfe4ea; --turf:#a6c3a0; --dirt:#b89373; }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{
    background:radial-gradient(1200px 900px at 70% 15%, #0e1628 0%, #0a111d 45%, #07090d 90%), #000;
    font:500 14px/1.6 "Yu Mincho","Hiragino Mincho ProN","Noto Serif JP",serif; color:#2c2b28; overflow-x:hidden;
  }
  .bg-icons{position:fixed; inset:0; z-index:0; pointer-events:none}
  .bg-icons .mono{position:absolute; opacity:.18; filter:drop-shadow(0 0 6px rgba(255,255,255,.06))}
  header{
    position:sticky; top:0; z-index:3; display:flex; gap:14px; align-items:center;
    padding:10px 16px 12px; color:#eadfbf;
    background:linear-gradient(180deg, rgba(10,14,24,.86), rgba(10,14,24,.62));
    border-bottom:1px solid rgba(202,168,94,.35); backdrop-filter: blur(6px) saturate(120%);
  }
  .kamon-head{width:36px;height:36px;border-radius:50%;overflow:hidden;background:#0c111b;
    box-shadow:0 0 0 1px rgba(202,168,94,.55) inset,0 0 18px rgba(202,168,94,.25);display:grid;place-items:center}
  .kamon-head svg{width:85%;height:85%;fill:var(--icon);stroke:var(--icon)}
  h1{margin:0;font-size:18px;letter-spacing:.18em}
  .wrap{position:relative; z-index:1; padding:18px}
  .grid{display:grid; gap:18px; grid-template-columns:repeat(3,minmax(280px,1fr)); max-width:1400px; margin:0 auto}
  .place{
    --band-a: rgba(177,58,42,.95); --band-b: rgba(177,58,42,.55);
    --tone:   #b13a2a; --tone-strong:#892417;
    position:relative; padding:14px; border-radius:14px; overflow:hidden;
    background:linear-gradient(180deg, rgba(255,255,255,.52), rgba(255,255,255,.34)), linear-gradient(180deg, var(--paper), #e6dcc4);
    box-shadow:0 6px 22px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.25) inset;
  }
  .place::before{
    content:""; position:absolute; inset:-6px auto -6px 0; width:12px;
    background:repeating-linear-gradient(180deg, var(--band-a) 0 12px, var(--band-b) 12px 24px);
    box-shadow:0 0 0 1px rgba(0,0,0,.25) inset,8px 0 16px var(--band-b);
  }
  .tone-indigo{ --band-a:rgba(46,74,150,.95); --band-b:rgba(46,74,150,.55); --tone:#2e4a96; --tone-strong:#1f3570 }
  .tone-forest{ --band-a:rgba(46,120,92,.95); --band-b:rgba(46,120,92,.55); --tone:#2e785c; --tone-strong:#1f5743 }
  .place h2{margin:0 0 10px 18px; font-size:18px; letter-spacing:.18em; color:#3b3a37; display:flex; align-items:center; gap:10px; flex-wrap:wrap}
  .status{margin-left:auto; display:flex; gap:8px; flex-wrap:wrap}
  .chip{padding:3px 8px; font-size:12px; color:#fff; letter-spacing:.15em; border-radius:999px;
    background:linear-gradient(180deg, #b48a3c,#8e6f33); box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
  .list{display:grid; gap:10px}
  .race{
    position:relative; border-radius:10px; padding:10px 12px; overflow:hidden; cursor:pointer;
    background:linear-gradient(180deg, rgba(255,255,255,.55), rgba(255,255,255,.35)),
             repeating-linear-gradient(45deg, rgba(0,0,0,.02) 0 8px, rgba(0,0,0,.00) 8px 16px);
    border:1px solid rgba(0,0,0,.18);
    box-shadow:0 2px 6px rgba(0,0,0,.15), 0 0 0 1px rgba(255,255,255,.5) inset;
    transition:transform .12s ease, box-shadow .18s ease, border-color .18s ease;
  }
  .race:hover{ transform:translateY(-2px); border-color:rgba(177,58,42,.45);
    box-shadow:0 10px 22px rgba(0,0,0,.22),0 0 0 1px rgba(177,58,42,.32) inset,0 0 22px rgba(177,58,42,.18) }
  .list .race:first-child{
    background:
      linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,.45)),
      linear-gradient(180deg, color-mix(in oklab, var(--tone) 24%, transparent),
                              color-mix(in oklab, var(--tone) 12%, transparent)),
      var(--paper);
    border-color: color-mix(in oklab, var(--tone-strong) 50%, #000);
    box-shadow:0 4px 12px color-mix(in oklab, var(--tone) 24%, transparent), 0 0 0 1px rgba(255,255,255,.55) inset;
  }
  .row{display:flex; align-items:center; justify-content:space-between; gap:10px; color:#31302d}
  .left{display:flex; gap:10px; align-items:center}
  .badge{min-width:40px; text-align:center; font-weight:700; letter-spacing:.08em; color:#fff;
    background:var(--tone); padding:4px 8px; border-radius:6px; box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
  .list .race:first-child .badge{ background:var(--tone-strong) }
  .type{font-weight:700; color:#4c4328}
  .meta{color:#6a6357; font-size:12px; letter-spacing:.05em}
  .odds{font-variant-numeric:tabular-nums; color:#3b3a37}
  .right{display:flex; align-items:center; gap:10px}
  .confidence{padding:3px 6px; font-size:12px; border-radius:999px; letter-spacing:.15em; color:#fff;
    background:linear-gradient(180deg,#b48a3c,#8e6f33); box-shadow:0 0 0 1px rgba(0,0,0,.25) inset}
  .turf{ background:linear-gradient(180deg, rgba(166,195,160,.26), rgba(166,195,115,.12)), var(--paper) }
  .dirt{ background:linear-gradient(180deg, rgba(185,147,115,.26), rgba(185,147,115,.12)), var(--paper) }
  @keyframes press { 0%{transform:translateY(0)} 50%{transform:translateY(1px) scale(0.995)} 100%{transform:translateY(0)} }
  @keyframes ring {
    0%{opacity:.35; transform:translate(-50%,-50%) scale(0.2)}
    80%{opacity:.05}
    100%{opacity:0; transform:translate(-50%,-50%) scale(1)}
  }
  @keyframes slashA {
    0%{opacity:.0; transform:translate(-60%,-60%) rotate(-28deg) scaleX(0.8)}
    10%{opacity:.9}
    100%{opacity:0; transform:translate(40%,40%) rotate(-28deg) scaleX(1.1)}
  }
  @keyframes slashB {
    0%{opacity:.0; transform:translate(60%,-60%) rotate(28deg) scaleX(0.8)}
    10%{opacity:.9}
    100%{opacity:0; transform:translate(-40%,40%) rotate(28deg) scaleX(1.1)}
  }
  .race.battle{ animation: press .18s ease-in-out }
  .race .fx, .race .ring, .race .slash{ position:absolute; pointer-events:none }
  .race .ring{
    left:50%; top:50%; width:220px; height:220px; border-radius:50%;
    border:2px solid rgba(177,58,42,.35);
    box-shadow:0 0 18px rgba(177,58,42,.25), inset 0 0 12px rgba(255,255,255,.35);
    transform-origin:center; opacity:0; animation: ring .6s ease-out forwards;
  }
  .race .slash{
    left:0; top:0; right:0; bottom:0; opacity:0; mix-blend-mode:overlay;
    filter:blur(.4px);
  }
  .race .slash::before{
    content:""; position:absolute; left:50%; top:50%; width:260px; height:2px;
    background:linear-gradient(90deg, transparent, rgba(255,255,255,.85), transparent);
    box-shadow:0 0 16px rgba(255,255,255,.35);
    transform-origin:left center;
  }
  .race .slash.a::before{ animation: slashA .5s ease-out forwards }
  .race .slash.b::before{ animation: slashB .5s ease-out forwards }
  @media (max-width:980px){ .grid{grid-template-columns:1fr} .place h2{gap:8px} .status{margin-left:0} }
</style>
</head>
<body>
<div class="bg-icons" id="bgIcons" aria-hidden="true"></div>
<header><div class="kamon-head" id="headKamon"></div><h1>競走一覧</h1></header>
<div class="wrap"><div class="grid" id="grid"></div></div>
<script>
const ICON_COLOR = getComputedStyle(document.documentElement).getPropertyValue('--icon').trim() || '#dfe4ea';
const KAMON = {
  kiri:() => `<svg viewBox="0 0 100 100"><g fill="${ICON_COLOR}"><path d="M50 12c-6 8-6 16 0 24 6-8 6-16 0-24z"/><path d="M30 28c-5 6-5 12 0 18 5-6 5-12 0-18z"/><path d="M70 28c-5 6-5 12 0 18 5-6 5-12 0-18z"/><rect x="22" y="58" width="56" height="10" rx="5"/></g></svg>`,
  rokumon:() => `<svg viewBox="0 0 100 100"><g fill="${ICON_COLOR}">${[[-22,-12],[0,-12],[22,-12],[-22,12],[0,12],[22,12]].map(([x,y])=>`<circle cx="${50+x}" cy="${50+y}" r="7"/>`).join('')}</g></svg>`,
  kikko:() => `<svg viewBox="0 0 100 100" fill="none" stroke="${ICON_COLOR}" stroke-width="8"><path d="M50 14 78 29 78 61 50 76 22 61 22 29 50 14Z"/><path d="M50 28 66 37 66 53 50 62 34 53 34 37 50 28Z"/></svg>`,
  tomoe:() => `<svg viewBox="0 0 100 100"><g fill="${ICON_COLOR}"><path d="M50 14a22 22 0 1 1-6 43c7-9 3-19 6-43z"/><path d="M26 33a22 22 0 1 1 36 27C52 55 42 58 26 33z"/><circle cx="62" cy="70" r="10"/></g></svg>`,
  shippo:() => `<svg viewBox="0 0 100 100" fill="none" stroke="${ICON_COLOR}" stroke-width="7"><circle cx="25" cy="50" r="20"/><circle cx="75" cy="50" r="20"/><circle cx="50" cy="25" r="20"/><circle cx="50" cy="75" r="20"/></svg>`,
  hanabishi:() => `<svg viewBox="0 0 100 100"><g fill="${ICON_COLOR}"><path d="M50 12 72 34 50 56 28 34 50 12Z"/><path d="M50 44 72 66 50 88 28 66 50 44Z"/></g></svg>`
};
const K_KEYS = Object.keys(KAMON);
const ICON_CFG = {count: 60, sizeMin: 46, sizeMax: 160, margin: 18, edgePad: 40, maxRatio:1.2};
function placeBackgroundIcons(){
  const wrap = document.getElementById('bgIcons'); wrap.innerHTML='';
  const W = innerWidth, H = innerHeight; const placed=[];
  const maxPer = Math.ceil((ICON_CFG.count / K_KEYS.length) * ICON_CFG.maxRatio);
  const used = Object.fromEntries(K_KEYS.map(k=>[k,0]));
  let prevKey = null, tries=0, hard=ICON_CFG.count*40;
  while(placed.length<ICON_CFG.count && tries<hard){
    tries++;
    let pick=null;
    for(let i=0;i<8;i++){
      const c = K_KEYS[(Math.random()*K_KEYS.length)|0];
      if(c===prevKey || used[c]>=maxPer) continue;
      pick=c; break;
    }
    if(!pick) pick=K_KEYS.reduce((a,b)=> used[a]<=used[b]?a:b);
    const size = ICON_CFG.sizeMin + Math.random()*(ICON_CFG.sizeMax-ICON_CFG.sizeMin);
    const r=size/2, x = ICON_CFG.edgePad + r + Math.random()*(W-2*(ICON_CFG.edgePad+r)),
          y = ICON_CFG.edgePad + r + Math.random()*(H-2*(ICON_CFG.edgePad+r));
    let ok=true; for(const p of placed){ if(Math.hypot(x-p.x,y-p.y) < (r+p.r+ICON_CFG.margin)){ ok=false; break; } }
    if(!ok) continue;
    const d=document.createElement('div'); d.className='mono';
    d.style.left=(x-r)+'px'; d.style.top=(y-r)+'px'; d.style.width=size+'px'; d.style.height=size+'px';
    d.innerHTML = KAMON[pick](); wrap.appendChild(d);
    placed.push({x,y,r}); used[pick]++; prevKey=pick;
  }
}
document.getElementById('headKamon').innerHTML = KAMON[K_KEYS[(Math.random()*K_KEYS.length)|0]]();
function makeRace(i,isTurf,text,time,odds='—',conf='—'){
  const el=document.createElement('div'); el.className=`race ${isTurf?'turf':'dirt'}`;
  el.innerHTML=`<div class="row"><div class="left"><div class="badge">${i}R</div><div><div class="type">${text}</div><div class="meta">${time}</div></div></div><div class="right"><div class="odds">${odds}</div><div class="confidence">自信度・${conf}</div></div></div>`;
  el.addEventListener('click', ()=>{
    el.classList.add('battle');
    const fxRing=document.createElement('div'); fxRing.className='ring';
    const sA=document.createElement('div'); sA.className='slash a';
    const sB=document.createElement('div'); sB.className='slash b';
    el.append(fxRing,sA,sB);
    setTimeout(()=>{ fxRing.remove(); sA.remove(); sB.remove(); el.classList.remove('battle'); }, 800);
  });
  return el;
}
function buildPlace(name,tone,statusGen,generator){
  const sec=document.createElement('section'); sec.className=`place ${tone}`;
  const {weather,turf,dirt}=statusGen();
  sec.innerHTML=`<h2><span>${name}</span><span class="status"><span class="chip">天気：${weather}</span><span class="chip">芝：${turf}</span><span class="chip">ダート：${dirt}</span></span></h2><div class="list"></div>`;
  const list=sec.querySelector('.list');
  for(let i=1;i<=12;i++){ const g=generator(i); list.appendChild(makeRace(i,g.isTurf,g.text,g.time,g.odds,g.conf)); }
  return sec;
}
function populate(){
  const grid=document.getElementById('grid'); grid.innerHTML='';
  grid.appendChild(buildPlace('東京','',
    ()=>({weather:'晴れ', turf:'良', dirt:'稍重'}),
    i=>({ isTurf:i%2===1, text:i%2?'芝 1600m・左':'ダ 1400m・左',
      time:`東京｜${String(10+Math.floor((i*30)/60)).padStart(2,'0')}:${String(i*30%60).padStart(2,'0')}`, odds:'—', conf:['小','中','大'][i%3] })));
  grid.appendChild(buildPlace('京都','tone-indigo',
    ()=>({weather:'晴れ', turf:'良', dirt:'やや重'}),
    i=>({ isTurf:i%2===0, text:i%2===0?'芝 1600m・右':'ダ 1400m・右',
      time:`京都｜${String(10+Math.floor((i*25)/60)).padStart(2,'0')}:${String(i*25%60).padStart(2,'0')}`, odds:'—', conf:['—','小','中','大'][i%4]||'—' })));
  grid.appendChild(buildPlace('新潟','tone-forest',
    ()=>({weather:'曇り', turf:'稍重', dirt:'重'}),
    i=>({ isTurf:i%2===1, text:i%2?'芝 1200m・直':'ダ 1800m・左',
      time:`新潟｜—`, odds:'—', conf:['—','小','中','大'][(i+1)%4]||'—' })));
}
placeBackgroundIcons(); populate(); addEventListener('resize', placeBackgroundIcons, {passive:true});
</script>
</body></html>

<!doctype html>
<html lang="zxx"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>𓇳 Ancient Egypt Race List 𓊖</title>
<style>
  :root{ --sand1:#d3b275; --sand2:#b48b4b; --dune:#a57e42; --stone:#181818; --ink:#f2f2e5; }
  *{box-sizing:border-box}
  html,body{ height:100%; margin:0; overflow-x:hidden; background:linear-gradient(180deg,var(--sand1),var(--sand2)); color:var(--ink); font-family:'Segoe UI Symbol', system-ui, sans-serif; }
  header{ position:sticky; top:0; z-index:20; text-align:center; padding:12px 0; background:rgba(24,24,24,.8); backdrop-filter:blur(6px); font-size:20px; font-weight:700; letter-spacing:.1em; border-bottom:2px solid rgba(255,255,255,.2) }
  main{ max-width:1200px; margin:30px auto 38vh; padding:0 16px }
  .grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:20px }
  @media (max-width:1000px){ .grid{ grid-template-columns:1fr } }
  .tablet{ position:relative; background:var(--stone); padding:16px 18px 22px; border-radius:18px; overflow:hidden; box-shadow:0 12px 26px rgba(0,0,0,.65), inset 0 1px 0 rgba(255,255,255,.05); clip-path:polygon(3% 2%, 96% 0%, 100% 10%, 98% 96%, 92% 100%, 8% 98%, 0% 86%, 1% 8%); }
  .tablet::before{ content:""; position:absolute; inset:-6px; pointer-events:none; z-index:1;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="120" height="120"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.9" numOctaves="2"/></filter><rect width="120" height="120" filter="url(%23n)" opacity="0.06"/></svg>') 0 0/120px 120px repeat, repeating-linear-gradient(0deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px), repeating-linear-gradient(90deg, rgba(255,255,255,.02) 0 1px, transparent 1px 4px); mix-blend-mode:overlay; }
  .cartouche{ display:inline-block; padding:6px 12px; margin-bottom:10px; border:2px solid rgba(255,255,255,.25); border-radius:18px; background:rgba(255,255,255,.05); font-size:1.1rem }
  .lines{ display:grid; grid-template-rows:repeat(12,minmax(22px,1fr)); gap:0 }
  .line{ display:flex; align-items:center; gap:6px; padding:2px 0; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(0,0,0,.06) 50%,rgba(0,0,0,.02)); text-shadow:0 1px 0 rgba(0,0,0,.85), 0 0 4px rgba(255,255,255,.06); }
  .enum{ width:3.0em; opacity:.95; letter-spacing:-.02em; display:flex; gap:.05em }
  .txt{ flex:1 1 auto; letter-spacing:.05em; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; font-size:.9rem }
  .sun{ position:fixed; top:28px; right:28px; width:140px; height:140px; border-radius:50%;
    background:radial-gradient(circle at 40% 40%, rgba(255,255,255,.95) 0 22%, rgba(255,232,160,.95) 23% 45%, rgba(255,196,80,.8) 46% 60%, rgba(255,180,60,.55) 61% 72%, rgba(255,170,40,.38) 73% 82%, rgba(255,160,20,.2) 83% 92%, rgba(255,150,0,.08) 93% 100%);
    box-shadow:0 0 60px rgba(255,200,80,.55), 0 0 120px rgba(255,200,80,.35); pointer-events:none; z-index:5 }
  .stage{ position:fixed; left:0; right:0; bottom:0; height:36vh; z-index:2; pointer-events:none; display:flex; align-items:flex-end; justify-content:center; background:linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.04) 18%, rgba(0,0,0,.08) 100%); }
  .dunes{ position:absolute; inset:0; z-index:0; background: radial-gradient(60% 100% at 40% 0%, rgba(0,0,0,.06), transparent 60%), linear-gradient(0deg, transparent 0 60%, rgba(0,0,0,.06) 60% 100%), linear-gradient(180deg, #cda968, #a97d3e); mask: linear-gradient(180deg, transparent 0 6%, black 20% 100%); }
  .stage-inner{ position:relative; z-index:1; width:min(1200px,92vw); height:30vh; padding:0 2vw 2vh; margin:0 auto; }
  .deity{ position:absolute; bottom:2vh; display:block; max-height:28vh; height:auto; width:auto; object-fit:contain; transform-origin:center bottom; filter:drop-shadow(0 6px 8px rgba(0,0,0,.35)); }
  .deity.sphinx{ max-height:22vh; left:2vw; bottom:3vh; }
</style>
</head>
<body>
  <div class="sun" aria-hidden="true"></div>
  <header>𓇳 Ancient Egypt Race List 𓊖</header>
  <main><div class="grid" id="grid"></div></main>
  <section class="stage" aria-hidden="true">
    <div class="dunes"></div>
    <div class="stage-inner" id="stageInner">
      <img class="deity sphinx" src="world_giza_sphynx.png" alt="">
      <img class="deity walker" src="character_egypt_osiris.png" alt="">
      <img class="deity walker" src="character_egypt_medjed.png" alt="">
      <img class="deity walker" src="character_egypt_anubis.png" alt="">
      <img class="deity walker" src="character_egypt_bastet.png" alt="">
    </div>
  </section>
<script>
const HIERO="𓀀𓀁𓀂𓀃𓀄𓀅𓀆𓀇𓀈𓀉𓀊𓀋𓀌𓀍𓀎𓀏𓀐𓀑𓀒𓀓𓀔𓀕𓀖𓀗𓀘𓀙𓀚𓀛𓀜𓀝𓀞𓀟𓀠𓀡𓀢𓀣𓀤𓀥𓀦𓀧𓀨𓀩𓀪𓀫𓀬𓀭𓀮𓀯𓀰𓀱𓀲𓀳𓀴𓀵𓀶𓀷𓀸𓀹𓀺𓀻𓀼𓀽𓀾𓀿𓁀𓁁𓁂𓁃𓁄𓁅𓁆𓁇𓁈𓁉𓁊𓁋𓁌𓁍𓁎𓁏𓁐𓁑𓁒𓁓𓁔𓁕𓁖𓁗𓁘𓁙𓁚𓁛𓁜𓁝𓁞𓁟𓁠𓁡𓁢𓁣𓁤𓁥𓁦𓁧𓁨𓁩𓁪𓁫𓁬𓁭𓁮𓁯𓁰𓁱𓁲𓁳𓁴𓁵𓁶𓁷𓁸𓁹𓁺𓁻𓁼𓁽𓁾𓁿𓂀𓂁𓂂𓂃𓂄𓂅𓂆𓂇𓂈𓂉𓂊𓂋𓂌𓂍𓂎𓂏𓂐𓂑𓂒𓂓𓂔𓂕𓂖𓂗𓂘𓂙𓂚𓂛𓂜𓂝𓂞𓂟𓂠𓂡𓂢𓂣𓂤𓂥𓂦𓂧𓂨𓂩𓂪𓂫𓂬𓂭𓂮𓂯𓂰𓂱𓂲𓂳𓂴𓂵𓂶𓂷𓂸𓂹𓂺𓂻𓂼𓂽𓂾𓂿𓃀𓃁𓃂𓃃𓃄𓃅𓃆𓃇𓃈𓃉𓃊𓃋𓃌𓃍𓃎𓃏𓃐𓃑𓃒𓃓𓃔𓃕𓃖𓃗𓃘𓃙𓃚𓃛𓃜𓃝𓃞𓃟𓃠𓃡𓃢𓃣𓃤𓃥𓃦𓃧𓃨𓃩𓃪𓃫𓃬𓃭𓃮𓃯𓃰𓃱𓃲𓃳𓃴𓃵𓃶𓃷𓃸𓃹𓃺𓃻𓃼𓃽𓃾𓃿𓄀𓄁𓄂";
function rndGlyphs(min=6,max=16){const n=Math.floor(Math.random()*(max-min+1))+min;let s="";for(let i=0;i<n;i++) s += HIERO[Math.floor(Math.random()*HIERO.length)]||"";return s;}
const ONE="𓏺", TEN="𓎆";
function egyptNum(n){const tens=Math.floor(n/10), ones=n%10;let s=""; if(tens>0) s += TEN.repeat(tens); if(ones>0) s += ONE.repeat(ones); return s || ONE;}
const grid=document.getElementById('grid');
for(let c=0;c<3;c++){
  const sec=document.createElement('section'); sec.className='tablet';
  const head=document.createElement('div'); head.className='cartouche'; head.textContent=rndGlyphs(6,10);
  const lines=document.createElement('div'); lines.className='lines';
  sec.appendChild(head); sec.appendChild(lines); grid.appendChild(sec);
  for(let r=1;r<=12;r++){
    const line=document.createElement('div'); line.className='line';
    const en=document.createElement('div'); en.className='enum'; en.textContent=egyptNum(r);
    const txt=document.createElement('div'); txt.className='txt'; txt.textContent=rndGlyphs(24,36);
    line.appendChild(en); line.appendChild(txt); lines.appendChild(line);
  }
}
(function(){
  const stage = document.getElementById('stageInner');
  const walkers = Array.from(stage.querySelectorAll('.walker'));
  function layout(){
    const w = stage.clientWidth; const count = walkers.length;
    let xCur = w*0.15, gap = (w*0.7)/(count-1 || 1);
    walkers.forEach((el,i)=>{
      const iw = el.getBoundingClientRect().width || (w/(count+2));
      const x  = Math.max(0, Math.min(w - iw, xCur - iw/2));
      el.dataset.x = x; el.style.left = x + 'px';
      el.dataset.dir = (Math.random()<0.5? -1: 1);
      el.dataset.speed = (1 + Math.random()*22).toFixed(2);
      xCur += gap;
    });
  }
  let last = 0;
  function tick(t){
    if(!last) last = t; const dt = (t - last) / 16.6667; last = t;
    const w = stage.clientWidth;
    walkers.forEach(el=>{
      let x = parseFloat(el.dataset.x)||0;
      let dir = parseFloat(el.dataset.dir)||1;
      const speed = parseFloat(el.dataset.speed)||4;
      const iw = el.getBoundingClientRect().width || 100;
      x += dir * speed * dt;
      const min = 0, max = Math.max(0, w - iw);
      if(x <= min || x >= max){
        x = Math.max(min, Math.min(max, x));
        const center = (w - iw)/2;
        dir = Math.sign(center - (x + iw/2)) || (Math.random()<0.5?1:-1);
        el.dataset.dir = dir;
        el.style.transition = 'transform 0.25s ease';
        el.style.transform = 'translateY(-14px)';
        setTimeout(()=>{ el.style.transform='translateY(0)'; el.style.transition='transform .35s ease'; }, 240);
        x = Math.max(min, Math.min(max, x + dir*20));
      }
      el.dataset.x = x; el.style.left = x + 'px';
    });
    requestAnimationFrame(tick);
  }
  window.addEventListener('load', ()=>{ layout(); requestAnimationFrame(tick); });
  window.addEventListener('resize', layout);
})();
</script>
</body></html>

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>中華フレーム – レース一覧（東京/京都/新潟 3×12）</title>
<link href="https://fonts.googleapis.com/css2?family=Ma+Shan+Zheng&family=ZCOOL+XiaoWei&family=Noto+Serif+SC:wght@500;700&display=swap" rel="stylesheet">
<style>
  :root{
    --bg-red1:#ac1f19; --bg-red2:#8e1a15;
    --card:#a3201a; --card2:#8b1914;
    --ink:#ffde69; --gold1:#f2d27b; --gold2:#b78a33;
    --turf:#ffd27f22; --dirt:#ffc07a22;
    --neon:#ffe766;
  }
  *{box-sizing:border-box}
  html,body{height:100%;margin:0}
  body{ font:700 14px/1.6 "Noto Serif SC","ZCOOL XiaoWei","Ma Shan Zheng","Hiragino Mincho ProN","Yu Mincho",serif;
    color:var(--ink); background:linear-gradient(180deg,var(--bg-red1),var(--bg-red2)); overflow-x:hidden;}
  .stage{position:fixed; inset:0; z-index:0; pointer-events:none}
  .meander{ position:absolute; left:0; right:0; bottom:0; height:48px;
    background:url('data:image/svg+xml;utf8,\
      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 48" preserveAspectRatio="none">\
        <defs><linearGradient id="g" x1="0" y1="0" x2="0" y2="1">\
          <stop offset="0" stop-color="%23f2d27b"/><stop offset="1" stop-color="%23b78a33"/>\
        </linearGradient></defs>\
        <rect width="320" height="48" fill="url(%23g)"/><g fill="none" stroke="%23ac1f19" stroke-width="6">\
          <path d="M8 8h28v28H16V16h12"/><path d="M40 8h28v28H48V16h12"/><path d="M72 8h28v28H80V16h12"/>\
          <path d="M104 8h28v28h-20V16h12"/><path d="M136 8h28v28h-20V16h12"/><path d="M168 8h28v28h-20V16h12"/>\
          <path d="M200 8h28v28h-20V16h12"/><path d="M232 8h28v28h-20V16h12"/><path d="M264 8h28v28h-20V16h12"/>\
        </g></svg>') repeat-x center/320px 48px; }
  .dragon-side{ position:fixed; z-index:0; top:72px; bottom:72px; width:150px; pointer-events:none;}
  .dragon-side.left{left:6px} .dragon-side.right{right:6px; transform:scaleX(-1)}
  .dragon-img{ position:absolute; left:50%; bottom:-30%; transform:translate(-50%,0) scale(var(--scale,1));
    width:auto; height:auto; max-width:120px; filter:drop-shadow(0 4px 10px rgba(0,0,0,.35));
    animation:riseSway var(--duration,24s) linear var(--delay,0s) infinite; }
  @keyframes riseSway{
    0%{transform:translate(calc(-50% + 0px),0) scale(var(--scale,1));}
    25%{transform:translate(calc(-50% + var(--sway,12px)),-25vh) scale(var(--scale,1));}
    50%{transform:translate(calc(-50% - var(--sway,12px)),-55vh) scale(var(--scale,1));}
    75%{transform:translate(calc(-50% + var(--sway,12px)),-85vh) scale(var(--scale,1));}
    100%{transform:translate(calc(-50% + 0px),-115vh) scale(var(--scale,1));}
  }
  @media (max-width:1280px){ .dragon-side{ display:none } }
  header{ position:sticky; top:0; z-index:2; display:flex; align-items:center; gap:12px; padding:10px 16px;
    color:var(--ink); background:linear-gradient(180deg, rgba(0,0,0,.55), rgba(0,0,0,.25));
    border-bottom:1px solid rgba(255,220,120,.35); backdrop-filter:blur(4px) saturate(120%); letter-spacing:.18em;}
  h1{margin:0; font-size:20px}
  .wrap{position:relative; z-index:1; padding:18px 24px 72px}
  .grid{display:grid; gap:18px; grid-template-columns:repeat(3,minmax(280px,1fr)); max-width:1400px; margin:0 auto}
  .place{ --tone:#d8a21f; --tone-strong:#b07d0e; --angle:0deg;
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.0)), linear-gradient(180deg, #a31e18, #8b1814);
    border-radius:14px; padding:14px; box-shadow:0 8px 28px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.35) inset; position:relative; overflow:hidden;}
  .place::before{ content:""; position:absolute; inset:-8px auto -8px 0; width:10px;
    background:linear-gradient(180deg,var(--gold1),var(--gold2)); box-shadow:0 0 0 1px rgba(0,0,0,.45) inset, 8px 0 20px rgba(0,0,0,.25);}
  .place h2{margin:0 0 10px 16px; font-size:18px; letter-spacing:.2em; color:var(--ink)}
  .list{display:grid; gap:10px}
  .race{ position:relative; display:flex; align-items:center; gap:12px; border-radius:10px; padding:10px 12px; color:var(--ink);
    background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(0,0,0,.0)), linear-gradient(180deg, #a31e18, #8b1814);
    border:1px solid rgba(0,0,0,.45); box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 6px 16px rgba(0,0,0,.25); cursor:pointer; transition:transform .12s ease, box-shadow .2s ease; }
  .race.turf{ box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 6px 16px rgba(0,0,0,.25), 0 0 0 1px var(--turf) inset }
  .race.dirt{ box-shadow:0 1px 0 rgba(255,255,255,.15) inset, 0 6px 16px rgba(0,0,0,.25), 0 0 0 1px var(--dirt) inset }
  .race:hover{ transform:translateY(-2px); box-shadow:0 1px 0 rgba(255,255,255,.18) inset, 0 14px 26px rgba(0,0,0,.35) }
  .race::after{ content:""; position:absolute; inset:-2px; border-radius:inherit; padding:2px;
    background:conic-gradient(from var(--angle), var(--neon) 0 10%, rgba(255,231,102,.06) 10% 100%);
    -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    -webkit-mask-composite:xor; mask-composite:exclude; opacity:0; }
  @keyframes sweep{ to{ --angle:360deg } }
  .race:hover::after{ opacity:1; animation:sweep .85s linear 1; box-shadow:0 0 16px 2px rgba(255,231,102,.55) }
  .icon{flex:0 0 44px; width:44px; height:44px; border-radius:8px; background:linear-gradient(180deg,var(--gold1),var(--gold2)); display:grid; place-items:center; box-shadow:0 0 0 1px rgba(0,0,0,.45) inset}
  .icon svg{width:86%; height:86%}
  .badge{min-width:44px; padding:4px 10px; text-align:center; color:#2f0b08; border-radius:8px;
    background:linear-gradient(180deg, color-mix(in oklab, var(--tone) 40%, #000), color-mix(in oklab, var(--tone-strong) 70%, #000)); box-shadow:0 0 0 1px rgba(0,0,0,.6) inset}
  .first .badge{ background:linear-gradient(180deg, color-mix(in oklab, var(--tone) 70%, #000), color-mix(in oklab, var(--tone-strong) 90%, #000)) }
  .info{display:flex; gap:8px; align-items:baseline; flex-wrap:wrap}
  .type{font-weight:800; color:var(--ink)}
  .meta{opacity:.9}
  .right{margin-left:auto; display:flex; gap:10px; align-items:center}
  .chip{padding:3px 8px; border-radius:999px; color:#55160f; background:linear-gradient(180deg,var(--gold1),var(--gold2)); box-shadow:0 0 0 1px rgba(0,0,0,.4) inset; font-weight:900}
</style>
</head>
<body>
<div class="stage" aria-hidden="true">
  <div class="meander"></div>
  <div class="dragon-side left" id="dragons-left"></div>
  <div class="dragon-side right" id="dragons-right"></div>
</div>
<header><h1>中華フレーム・レース一覧（東京 / 京都 / 新潟）</h1></header>
<div class="wrap"><div class="grid" id="grid"></div></div>
<script>
const ICON_PANDA = () => `
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <defs><radialGradient id="gl" cx="50%" cy="35%" r="60%"><stop offset="0" stop-color="#ffd" stop-opacity=".18"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></radialGradient></defs>
  <circle cx="25" cy="22" r="15" fill="#8b1814"/>
  <circle cx="75" cy="22" r="15" fill="#8b1814"/>
  <path d="M50 18c-20 0-36 12-36 28 0 19 16 36 36 36s36-17 36-36C86 30 70 18 50 18z" fill="#8b1814"/>
  <ellipse cx="34" cy="50" rx="12" ry="16" fill="#8b1814"/>
  <ellipse cx="66" cy="50" rx="12" ry="16" fill="#8b1814"/>
  <path d="M38 66c7 9 17 9 24 0-2 6-8 10-12 10s-10-4-12-10z" fill="#8b1814"/>
  <circle cx="50" cy="58" r="2.6" fill="#8b1814"/>
  <ellipse cx="34" cy="50" rx="7" ry="10" fill="#ac1f19"/>
  <ellipse cx="66" cy="50" rx="7" ry="10" fill="#ac1f19"/>
  <ellipse cx="50" cy="30" rx="26" ry="13" fill="url(#gl)"/>
</svg>`;
const ICON_YINYANG = () => `
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <circle cx="50" cy="50" r="42" fill="none" stroke="#8b1814" stroke-width="6"/>
  <path d="M50 8a42 42 0 0 0 0 84a21 21 0 0 0 0-42a21 21 0 0 1 0-42z" fill="#8b1814"/>
  <circle cx="50" cy="29" r="6" fill="#8b1814"/><circle cx="50" cy="71" r="6" fill="#ac1f19"/>
</svg>`;
const ICON_WATERLILY = () => `
<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg">
  <g fill="none" stroke="#8b1814" stroke-width="5" stroke-linecap="round" stroke-linejoin="round">
    <path d="M50 18c-8 10-10 20-7 30-12-5-22 1-30 10 16 2 27-2 37-10 10 8 21 12 37 10-8-9-18-15-30-10 3-10 1-20-7-30z"/>
    <path d="M50 28c-6 6-7 14-5 21-8-3-14 0-21 6 12 1 20-2 26-7 8 6 15 8 26 7-7-6-13-9-21-6 2-7 1-15-5-21z"/>
    <circle cx="50" cy="58" r="6"/>
  </g>
</svg>`;
const LEVELS = ['良','激','極','悪'];
function choice(arr){ return arr[Math.floor(Math.random()*arr.length)] }
function raceRow(i,isTurf,text,time,icon){
  const svg = icon==='panda'?ICON_PANDA():icon==='yin'?ICON_YINYANG():ICON_WATERLILY();
  const div=document.createElement('div');
  div.className=`race ${isTurf?'turf':'dirt'} ${i===1?'first':''}`;
  div.innerHTML=`
    <div class="icon">${svg}</div>
    <div class="badge">${i}R</div>
    <div class="info"><span class="type">${text}</span><span class="meta">${time}</span></div>
    <div class="right">
      <span class="chip">期待：${choice(LEVELS)}</span>
      <span class="chip">自信：${choice(LEVELS)}</span>
    </div>`;
  return div;
}
function buildPlace(cls,title,icon){
  const sec=document.createElement('section'); sec.className=`place ${cls}`;
  sec.innerHTML=`<h2>${title}</h2><div class="list"></div>`;
  const list=sec.querySelector('.list');
  for(let i=1;i<=12;i++){
    const isTurf=i%2===1;
    const text=isTurf?'芝 1600m':'ダ 1400m';
    const time=`${title}｜${String(10+Math.floor((i*30)/60)).padStart(2,'0')}:${String(i*30%60).padStart(2,'0')}`;
    list.appendChild(raceRow(i,isTurf,text,time,icon));
  }
  return sec;
}
function spawnDragons(containerId){
  const el = document.getElementById(containerId);
  for(let i=0;i<4;i++){
    const img = document.createElement('img');
    img.className = 'dragon-img';
    img.src = 'DRAGON_IMG.png';
    const scale = (1 + Math.random()).toFixed(2);
    const speed = (24 / (1 + Math.random()*2)).toFixed(2);
    const delay = (-Math.random()*20).toFixed(2);
    const sway  = Math.round(8 + Math.random()*18) + 'px';
    img.style.setProperty('--scale', scale);
    img.style.setProperty('--duration', speed+'s');
    img.style.setProperty('--delay', delay+'s');
    img.style.setProperty('--sway', sway);
    el.appendChild(img);
  }
}
(function init(){
  const grid=document.getElementById('grid');
  grid.appendChild(buildPlace('tokyo','東京','panda'));
  grid.appendChild(buildPlace('kyoto','京都','yin'));
  grid.appendChild(buildPlace('niigata','新潟','waterlily'));
  spawnDragons('dragons-left'); spawnDragons('dragons-right');
})();
</script>
</body></html>

<!doctype html>
<html lang="ja"><head><meta charset="utf-8"/><meta name="viewport" content="width=device-width,initial-scale=1"/>
<title>Medieval Europe – France / UK / Germany</title>
<style>
  :root{
    --ink:#f5f3e7; --parchment:#efe7d1; --parchment-2:#e3d7b5; --parchment-turf:#e9ecd9;
    --gold:#d8b555; --gold-deep:#8a6b21; --radius:18px; --card-h:62px;
  }
  *{box-sizing:border-box}
  html,body{margin:0;height:100%;color:var(--ink);font-family:system-ui,Segoe UI,Roboto,"Yu Gothic",Meiryo,sans-serif;overflow-x:hidden;}
  body::before{content:"";position:fixed;inset:0;z-index:-1;background:url('2d08c7c0-48e3-4ce9-916e-2283dbccb475.png') center/cover no-repeat;filter:blur(2px) brightness(0.9);transform:scale(1.05);}
  header{position:sticky;top:0;background:rgba(20,20,24,.82);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,215,128,.22);padding:12px 20px;z-index:10;font-weight:700;letter-spacing:.05em}
  .wrap{max-width:1400px;margin:20px auto;padding:0 20px}
  .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
  .venue{border:1px solid rgba(255,215,128,.25);border-radius:22px;overflow:hidden;background:rgba(0,0,0,.35);box-shadow:0 10px 24px rgba(0,0,0,.35)}
  .venue-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:rgba(0,0,0,.4);backdrop-filter:blur(6px);border-bottom:1px solid rgba(255,215,128,.2)}
  .crest-badge{display:flex;align-items:center;gap:10px;font-weight:700}
  .flag{width:30px;height:20px;border-radius:4px;box-shadow:0 0 4px #000;display:inline-grid;place-items:center;overflow:hidden}
  .race-list{padding:14px;display:grid;grid-auto-rows:var(--card-h);gap:12px}
  .race{position:relative;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius);
    background:linear-gradient(130deg,var(--parchment),var(--parchment-2));opacity:0.85;
    box-shadow:0 0 0 1px rgba(70,50,10,.2) inset,0 0 0 3px rgba(255,240,210,.25) inset,0 10px 18px rgba(0,0,0,.35);
    border:1px solid rgba(97,77,24,.55);color:#2b2215}
  .race.turf{background:linear-gradient(180deg,rgba(255,255,255,.6),rgba(255,255,255,0)),radial-gradient(120% 140% at 10% 0%,rgba(220,235,205,.7),rgba(220,235,205,0) 60%),linear-gradient(130deg,var(--parchment-turf),#dfe6c9);opacity:0.95;}
  .badge{width:42px;height:42px;display:grid;place-items:center;border-radius:12px;color:#fff;font-weight:700;
    background:linear-gradient(180deg,#0003,#0000),radial-gradient(circle at 30% 20%,#fff5,#0000 50%),linear-gradient(180deg,#7d5a1f,#513f17);
    box-shadow:inset 0 2px 6px rgba(0,0,0,.25),0 6px 12px rgba(0,0,0,.35);border:1px solid rgba(0,0,0,.45)}
  .info{display:flex;gap:12px;align-items:baseline;flex-wrap:wrap}
  .name{font-weight:800}
  .meta{opacity:.85;font-size:12px}
  .pill{font-size:12px;padding:6px 10px;border-radius:999px;background:rgba(0,0,0,.06);border:1px solid rgba(0,0,0,.25)}
  .race:hover{transform:translateY(-1px);box-shadow:0 0 0 1px rgba(97,77,24,.6) inset,0 0 0 3px rgba(255,240,210,.35) inset,0 18px 28px rgba(0,0,0,.45)}
  @media (max-width:1200px){.grid{grid-template-columns:1fr 1fr}}
  @media (max-width:780px){.grid{grid-template-columns:1fr}}
</style>
</head>
<body>
<header>中世ヨーロッパ風 レースリスト – France / UK / Germany</header>
<div class="wrap">
  <section class="grid">
    <article class="venue" data-venue="france">
      <div class="venue-head">
        <div class="crest-badge">
          <span class="flag" aria-label="Flag of France">
            <svg viewBox="0 0 3 2" width="30" height="20">
              <rect width="1" height="2" x="0" y="0" fill="#0055A4"/>
              <rect width="1" height="2" x="1" y="0" fill="#ffffff"/>
              <rect width="1" height="2" x="2" y="0" fill="#EF4135"/>
            </svg>
          </span>
          <div class="venue-name">フランス</div>
        </div>
        <div class="meta">France</div>
      </div>
      <div class="race-list" id="list-fr"></div>
    </article>

<article class="venue" data-venue="uk">
      <div class="venue-head">
        <div class="crest-badge">
          <span class="flag" aria-label="Flag of the United Kingdom">
            <svg viewBox="0 0 60 40" width="30" height="20">
              <rect width="60" height="40" fill="#012169"/>
              <path d="M0,0 60,40 M60,0 0,40" stroke="#fff" stroke-width="8"/>
              <path d="M0,0 60,40 M60,0 0,40" stroke="#C8102E" stroke-width="4"/>
              <path d="M30,0 v40 M0,20 h60" stroke="#fff" stroke-width="10"/>
              <path d="M30,0 v40 M0,20 h60" stroke="#C8102E" stroke-width="6"/>
            </svg>
          </span>
          <div class="venue-name">イギリス</div>
        </div>
        <div class="meta">United Kingdom</div>
      </div>
      <div class="race-list" id="list-uk"></div>
    </article>

<article class="venue" data-venue="germany">
      <div class="venue-head">
        <div class="crest-badge">
          <span class="flag" aria-label="Flag of Germany">
            <svg viewBox="0 0 5 3" width="30" height="20">
              <rect width="5" height="1" y="0" fill="#000000"/>
              <rect width="5" height="1" y="1" fill="#DD0000"/>
              <rect width="5" height="1" y="2" fill="#FFCE00"/>
            </svg>
          </span>
          <div class="venue-name">ドイツ</div>
        </div>
        <div class="meta">Germany</div>
      </div>
      <div class="race-list" id="list-de"></div>
    </article>
  </section>
</div>
<script>
(function(){
  const venues=[
    {id:'list-fr',races:['パリ大賞','ブルゴーニュ特別','ニース記念','リヨン賞','マルセイユ特別','ランス杯','ルーアン記念','ボルドー特別','ストラスブール杯','ツールーズ賞','カンヌ記念','モンペリエ特別']},
    {id:'list-uk',races:['ロンドン大賞','マンチェスター特別','リバプール記念','ヨーク杯','チェルシー特別','ケンブリッジ賞','オックスフォード記念','カンタベリー盃','ノリッジ特別','バース記念','ニューカッスル杯','ブライトン特別']},
    {id:'list-de',races:['ベルリン大賞','ハンブルク特別','ミュンヘン記念','ケルン杯','ドレスデン特別','ハノーファー賞','ブレーメン記念','シュトゥットガルト特別','ライプツィヒ杯','ボン賞','フランクフルト記念','ニュルンベルク特別']}
  ];
  const kinds=['芝','ダ']; const turns=['右','左']; const dists=[1200,1400,1600,1800,2000,2200,2400];
  function pick(arr){return arr[Math.floor(Math.random()*arr.length)];}
  function makeRow(name, idx){
    const kind = pick(kinds);
    const el = document.createElement('a');
    el.className = 'race' + (kind==='芝' ? ' turf' : '');
    el.innerHTML = `<div class="badge">${String(idx).padStart(2,'0')}R</div><div class="info"><div class="name">${name}</div><div class="meta">${kind}・${pick(dists)}m・${pick(turns)}回り</div></div><div class="pill">発走 ${String(9+Math.floor((idx-1)/2)).padStart(2,'0')}:${(idx%2? '55':'25')}</div>`;
    return el;
  }
  venues.forEach(v=>{const root=document.getElementById(v.id);v.races.forEach((name,i)=>root.appendChild(makeRow(name,i+1)));});
})();
</script>
</body></html>