/* 暗い海の画面（門・入室・添削）。金は貴重品。勝敗の色には使わない。 */
:root{
  --abyss:#03152e;--deep:#073462;--sea:#0b4e8a;--surf:#3f9ae0;--foam:#cfe9ff;
  --ink:#eaf4ff;--sub:#a8c6e6;--dim:#7f9fc4;
  --gold:#e3bd52;--gold-d:#b8901f;--gold-l:#ffeeb6;
  --up:#56e3ac;--dn:#ff6f8d;
  --glass:rgba(4,22,46,.84);--line:rgba(159,205,245,.22);
  color-scheme:dark;
}
body{color:var(--ink);background:#031024}
.bn .w{background-image:linear-gradient(110deg,#ffeeb6,#e3bd52 42%,#c9a227);filter:drop-shadow(0 2px 10px rgba(0,0,0,.7))}
.bn .s{color:rgba(168,198,230,.74)}
.dimp{color:var(--dim)}

/* ───── 世界 ───── */
.world{position:fixed;inset:0;z-index:0;overflow:hidden}
.world .bg{position:absolute;inset:-4%;background:url(/static/img/bg_palace.jpg) center/cover no-repeat;
  animation:drift 48s ease-in-out infinite alternate}
@keyframes drift{to{transform:scale(1.08) translate(-1.6%,-1.2%)}}
.world .tintc{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(122% 88% at 50% 24%,rgba(2,10,26,.18) 30%,rgba(2,10,26,.72) 100%),
    linear-gradient(180deg,rgba(2,12,28,.6) 0%,rgba(2,12,28,.14) 30%,rgba(2,12,28,.82) 100%)}
.world .rays{position:absolute;inset:-12%;mix-blend-mode:screen;opacity:.34;pointer-events:none;
  background:linear-gradient(187deg,rgba(190,235,255,.5) 0 7px,transparent 7px 80px),
    linear-gradient(174deg,rgba(255,240,200,.3) 0 4px,transparent 4px 60px);
  animation:rays 21s ease-in-out infinite alternate}
@keyframes rays{to{transform:translateX(60px) skewX(-2.5deg)}}
#bub{position:absolute;inset:0;pointer-events:none}
.ryu{position:absolute;top:4%;left:-14%;pointer-events:none;width:min(1500px,150vw);aspect-ratio:1376/768;
  -webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 88%,transparent 100%);
  mask-image:linear-gradient(180deg,transparent 0%,#000 14%,#000 88%,transparent 100%);
  background:url(/static/img/ryu_glow.jpg) center/contain no-repeat;mix-blend-mode:screen;
  opacity:.72;will-change:transform;animation:swim 38s ease-in-out infinite}
.ryu2{opacity:.2;animation-duration:40s;animation-delay:-1.6s;filter:blur(1.5px)}
@keyframes swim{
  0%{transform:translate(-10%,2%) scale(.78) rotate(-7deg) skewY(2deg)}
  11%{transform:translate(2%,-5%) scale(.9) rotate(-1deg) skewY(-1.6deg)}
  23%{transform:translate(16%,-9%) scale(1.08) rotate(5deg) skewY(2.4deg)}
  34%{transform:translate(28%,-2%) scale(.98) rotate(1deg) skewY(-2deg)}
  46%{transform:translate(36%,6%) scale(.82) rotate(-6deg) skewY(1.6deg)}
  57%{transform:translate(26%,12%) scale(.94) rotate(2deg) skewY(-2.4deg)}
  69%{transform:translate(12%,15%) scale(1.12) rotate(7deg) skewY(2deg)}
  80%{transform:translate(0%,10%) scale(.96) rotate(1deg) skewY(-1.6deg)}
  91%{transform:translate(-6%,5%) scale(.85) rotate(-4deg) skewY(1.2deg)}
  100%{transform:translate(-10%,2%) scale(.78) rotate(-7deg) skewY(2deg)}}

/* ───── 門の画面 ───── */
.page{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.hubbar{padding-block:16px 0;gap:17px}
.crest{filter:drop-shadow(0 6px 18px rgba(0,0,0,.6)) drop-shadow(0 0 16px rgba(232,200,106,.5))}
.tr{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap;align-items:center}
.chip{display:inline-flex;align-items:center;gap:8px;border-radius:999px;padding:8px 16px;font-size:12px;color:var(--sub);
  border:1px solid var(--line);background:var(--glass);white-space:nowrap;box-shadow:0 6px 20px rgba(0,0,0,.4)}
.chip b{color:#fff;font-weight:500;font-family:var(--nu)}
.chip.run{color:var(--up);border-color:rgba(86,227,172,.42)}
.chip.go{color:#06223f;font-weight:700;border:0;background:linear-gradient(110deg,#c9a227,#fff3cf 55%,#e8c86a)}
.dot{width:7px;height:7px;border-radius:50%;background:var(--up);animation:pulse 1.9s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(86,227,172,.6)}70%{box-shadow:0 0 0 10px rgba(86,227,172,0)}100%{box-shadow:0 0 0 0 rgba(86,227,172,0)}}

.title{position:relative;text-align:center;padding-block:clamp(10px,2.6vh,30px) 0;
  animation:up .9s cubic-bezier(.2,.9,.3,1) both .15s}
.title::before{content:"";position:absolute;left:50%;top:40%;transform:translate(-50%,-50%);
  width:min(1000px,100vw);height:210px;pointer-events:none;z-index:-1;
  background:radial-gradient(closest-side,rgba(2,12,28,.9),rgba(2,12,28,.62) 62%,transparent 82%);filter:blur(6px)}
.title h1{font-size:clamp(25px,4.2vw,44px);font-weight:900;letter-spacing:.14em;
  text-shadow:0 4px 34px rgba(0,0,0,.8),0 0 54px rgba(127,212,255,.28)}
.title h1 em{font-style:normal;background:linear-gradient(110deg,#fff3cf,#e3bd52 45%,#c9a227);
  -webkit-background-clip:text;background-clip:text;color:transparent}
.title .rule{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:10px}
.title .rule i{display:block;width:clamp(50px,9vw,130px);height:1px;background:linear-gradient(90deg,transparent,rgba(232,200,106,.85))}
.title .rule i+i{background:linear-gradient(90deg,rgba(232,200,106,.85),transparent)}
.title .rule span{font-family:var(--la);font-size:clamp(10px,1.1vw,13px);letter-spacing:.42em;color:#fbe9b8;
  white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.9)}
@keyframes up{from{opacity:0;transform:translateY(22px)}}

.gates{flex:1;display:flex;align-items:center;justify-content:center;
  padding-block:clamp(10px,2vh,22px) calc(clamp(18px,4vh,48px) + env(safe-area-inset-bottom,0px))}
.row{display:flex;gap:clamp(4px,.8vw,16px);justify-content:center;align-items:flex-end;width:100%;max-width:1480px}
.gate{display:block;position:relative;flex:1 1 0;min-width:0;max-width:220px;aspect-ratio:711/1192;text-decoration:none;
  color:inherit;animation:up .85s cubic-bezier(.2,.9,.3,1) both,float 7.5s ease-in-out infinite}
.gate:nth-child(1){animation-delay:.22s,0s}.gate:nth-child(2){animation-delay:.3s,.45s}
.gate:nth-child(3){animation-delay:.38s,.9s}.gate:nth-child(4){animation-delay:.46s,1.35s}
.gate:nth-child(5){animation-delay:.54s,1.8s}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
.glassIn{position:absolute;left:13.9%;right:14.2%;top:8.9%;bottom:15.3%;z-index:1;overflow:hidden;
  clip-path:polygon(50% 0%,100% 21%,100% 89%,50% 100%,0% 89%,0% 21%);
  background:radial-gradient(150% 66% at 50% 116%,rgba(120,214,255,.95),transparent 60%),
    radial-gradient(120% 50% at 50% -10%,rgba(90,170,255,.3),transparent 60%),
    linear-gradient(180deg,rgba(9,42,86,.88),rgba(4,22,52,.92));
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:9%;transition:filter .35s}
.glassIn::before{content:"";position:absolute;left:-55%;top:-30%;width:48%;height:170%;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-16deg);animation:shine 7.5s ease-in-out infinite}
@keyframes shine{0%,76%{left:-55%}94%,100%{left:130%}}
.glassIn .surf{position:absolute;left:-14%;right:-14%;bottom:-8%;height:48%;pointer-events:none;
  background:radial-gradient(96% 100% at 50% 124%,rgba(130,214,255,.85),transparent 70%);animation:tide 5s ease-in-out infinite}
@keyframes tide{50%{transform:translateY(-7px) scaleX(1.07);opacity:.82}}
.glassIn svg{width:42%;max-width:64px;height:auto;position:relative;z-index:2;filter:drop-shadow(0 0 12px rgba(255,214,120,.8))}
.gname{position:relative;z-index:2;font-size:clamp(9px,1.02vw,14px);font-weight:900;letter-spacing:.02em;text-align:center;
  line-height:1.35;padding:0 3%;white-space:nowrap;background:linear-gradient(180deg,#fff6da,#e3bd52 55%,#c9a227);
  -webkit-background-clip:text;background-clip:text;color:transparent;filter:drop-shadow(0 2px 6px rgba(0,0,0,.9))}
.gstate{position:relative;z-index:2;font-family:var(--la);font-size:8px;letter-spacing:.24em;padding:2px 9px;border-radius:999px}
.gstate.on{color:#06223f;background:linear-gradient(110deg,#fff3cf,#e3bd52)}
.frame{position:absolute;inset:0;z-index:2;pointer-events:none;background:url(/static/img/gate.svg) center/contain no-repeat;
  filter:drop-shadow(0 10px 26px rgba(0,0,0,.6));transition:filter .35s}
.gate::after{content:"";position:absolute;left:-6%;right:-6%;bottom:0;height:16%;border-radius:50%;pointer-events:none;z-index:0;
  background:radial-gradient(closest-side,rgba(255,214,120,.55),rgba(130,214,255,.2) 55%,transparent 76%);
  filter:blur(7px);animation:tide 5.6s ease-in-out infinite}
.gate:hover .frame,.gate:focus-visible .frame{filter:drop-shadow(0 16px 38px rgba(0,0,0,.64)) drop-shadow(0 0 26px rgba(255,214,120,.95))}
.gate:hover .glassIn,.gate:focus-visible .glassIn{filter:brightness(1.3)}

@media(max-width:760px){
  .row{flex-wrap:wrap;gap:8px 4px}
  .gate{flex:0 0 calc((100% - 8px)/3);max-width:124px} /* 3＋2。下の段も同じ大きさのまま中央に寄せる */
  .gname{font-size:min(11px,2.66vw)}
}

/* ───── 入室の札・ダイアログ ───── */
.door{position:fixed;inset:0;z-index:20;display:grid;place-items:center;padding:22px;
  background:radial-gradient(60% 52% at 50% 50%,rgba(13,85,147,.62),rgba(1,8,20,.95) 72%);animation:din .32s ease-out}
@keyframes din{from{opacity:0}}
.door.out{animation:dout .38s ease-in forwards}
@keyframes dout{to{opacity:0}}
.center{position:relative;z-index:2;min-height:100vh;min-height:100dvh;display:grid;place-items:center;padding:22px}
.card{width:min(440px,100%);border-radius:24px;padding:3px;
  background:linear-gradient(165deg,#fff3cf,#c9a227 30%,#8a6a14 60%,#e3bd52 100%);
  box-shadow:0 36px 90px rgba(0,0,0,.7),0 0 50px rgba(232,200,106,.3);animation:cin .45s cubic-bezier(.2,.9,.3,1) both}
@keyframes cin{from{opacity:0;transform:translateY(26px) scale(.95)}}
.cardIn{border-radius:21px;background:linear-gradient(180deg,rgba(8,40,76,.98),rgba(3,18,40,.99));padding:28px 26px 22px;text-align:center}
.cardIn .no{width:44px;height:44px;border-radius:14px;margin:0 auto 15px;display:grid;place-items:center;font-family:var(--nu);
  font-weight:700;color:#06223f;background:linear-gradient(140deg,#fff3cf,#c9a227)}
.cardIn h3,.cardt{font-size:21px;font-weight:900;letter-spacing:.08em}
.cardIn p{margin:13px 0 0;font-size:13px;color:var(--sub);line-height:2}
.door .cardIn p{white-space:pre-line}
.btns{display:flex;gap:11px;margin-top:22px}
.btns a,.btns button{flex:1;border-radius:13px;padding:12px 0;font-family:inherit;font-size:13px;font-weight:700;cursor:pointer;
  border:1px solid var(--line);background:transparent;color:var(--sub);text-decoration:none;display:block;text-align:center}
.btns .go{border:0;background:linear-gradient(110deg,#c9a227,#fff3cf 55%,#e3bd52);color:#06223f}
.stack{display:flex;flex-direction:column;gap:9px;margin-top:20px;text-align:left}
.stack .primary{margin-top:8px}
.lab{font-size:12px;color:var(--sub);letter-spacing:.06em}
input[type=email],textarea{width:100%;border-radius:12px;border:1px solid var(--line);background:rgba(2,14,34,.68);color:var(--ink);
  font:inherit;font-size:16px;padding:11px 13px;transition:border-color .2s,box-shadow .2s}
input[type=email]:focus,textarea:focus{outline:0;border-color:var(--gold);box-shadow:0 0 0 3px rgba(227,189,82,.18)}
.quiet{display:inline-block;margin-top:16px;font-size:12px;color:var(--sub);text-underline-offset:3px}
.cardIn .dimp{font-size:12px;color:var(--dim)}
.secondary{border:1px solid var(--line);color:var(--ink)}

/* ───── 部屋の帯（暗い） ───── */
.roomhead{position:relative;z-index:6;background:rgba(3,18,40,.8);backdrop-filter:blur(14px);border-bottom:1px solid rgba(232,200,106,.22)}
.roomnav a{color:var(--sub)}
.roomnav i{background:rgba(159,205,245,.14);color:var(--foam);font-family:var(--nu)}
.roomnav a:hover{background:rgba(159,205,245,.1);color:#fff}
.roomnav a.on{color:var(--gold-l);border-color:rgba(232,200,106,.46);background:rgba(232,200,106,.1)}
.roomnav a.on i{background:linear-gradient(140deg,#fff3cf,#c9a227);color:#06223f}
.h{display:flex;align-items:baseline;gap:13px;margin-bottom:15px;flex-wrap:wrap}
.h .d{color:var(--gold);font-size:10px;position:relative;top:-2px}
.h h2{font-size:17px;font-weight:900;letter-spacing:.1em;white-space:nowrap;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.h .n{font-size:12px;color:var(--sub);text-shadow:0 2px 10px rgba(0,0,0,.9);min-width:0}
.h::after{content:"";height:1px;flex:1 1 40px;background:linear-gradient(90deg,rgba(232,200,106,.6),transparent);position:relative;top:-4px}
.emptyic{opacity:.8}
.emptycard p{color:var(--sub)}

/* 金の縁の盤（mask で縁だけグラデーション）。すりガラスは帯だけ（§9）。 */
.glass{position:relative;border-radius:18px;background:var(--glass);box-shadow:0 24px 60px rgba(0,0,0,.45)}
.glass::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;pointer-events:none;
  background:linear-gradient(140deg,rgba(255,243,207,.75),rgba(201,162,39,.32) 40%,rgba(159,205,245,.22) 70%,rgba(232,200,106,.6));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.below{color:rgba(224,239,255,.92);text-shadow:0 2px 8px rgba(0,0,0,.95)}
.pill.on{color:#06223f;background:linear-gradient(110deg,#fff3cf,#e3bd52)}
.pill.wait{color:var(--gold-l);border:1px solid rgba(232,200,106,.5)}
.pill.off{color:var(--sub);border:1px solid var(--line)}
@media(min-width:761px){.roomhead{position:sticky;top:0}}