/* ============================================================
 * rinka-omikuji.css — りんかおみくじ v2（/omikuji/・2026-09-26）
 * 本体は assets/js/rinka-omikuji.js。旧スタイル（fansite.css の .rinka-fs-omikuji*）とは別名（.rko-*）。
 * スマホ縦持ち最優先・横持ち／PCでも崩れない。prefers-reduced-motion では動きを止める。
 * ========================================================== */

.rko {
	--rko-ink: #5a3a46;
	--rko-sub: #8a6a78;
	--rko-red: #d9434f;
	--rko-red-d: #a8303f;
	--rko-gold: #e0b34a;
	--rko-paper: #fffaf0;
	--rko-line: #f1d9c6;
	--rko-pink: #ff7fa8;
	position: relative;
	max-width: 640px;
	margin: 8px auto 28px;
	padding: 0 12px;
	color: var(--rko-ink);
	font-family: "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Yu Gothic", sans-serif;
	-webkit-tap-highlight-color: transparent;
	overflow-x: clip;
}
.rko *, .rko *::before, .rko *::after { box-sizing: border-box; }
.rko-ico { width: 28px; height: 28px; flex: none; object-fit: contain; }

/* ---------- HUD ---------- */
.rko-hud {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 6px;
	margin: 0 0 10px;
}
.rko-chip {
	display: grid;
	grid-template-columns: auto 1fr;
	grid-template-rows: auto auto;
	align-items: center;
	column-gap: 4px;
	padding: 6px 8px;
	border-radius: 14px;
	background: #fff;
	border: 2px solid #fbe0ea;
	box-shadow: 0 3px 0 #f7d3e0;
	min-width: 0;
}
.rko-chip .rko-ico { grid-row: 1 / 3; width: 26px; height: 26px; }
.rko-chip__l { font-size: .68rem; font-weight: 700; color: var(--rko-sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rko-chip__v { font-size: .98rem; font-weight: 900; line-height: 1.1; white-space: nowrap; }
.rko-chip.is-hot { border-color: #ffc27a; box-shadow: 0 3px 0 #f6c98f; background: #fff8ec; }
.rko-hud__title {
	grid-column: 1 / -1;
	display: flex; align-items: center; justify-content: center; gap: 6px;
	margin: 2px 0 0; font-size: .86rem; font-weight: 900; color: #b07a16;
}
.rko-hud__title .rko-ico { width: 24px; height: 24px; }

/* ---------- ステージ（筒） ---------- */
.rko-stage {
	position: relative;
	overflow: hidden;
	border-radius: 26px;
	padding: 18px 12px 16px;
	min-height: clamp(300px, 58vh, 420px);
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background:
		radial-gradient(120% 70% at 50% 110%, #ffe1ec 0%, rgba(255, 225, 236, 0) 60%),
		radial-gradient(60% 45% at 50% 42%, rgba(255, 244, 214, .95) 0%, rgba(255, 244, 214, 0) 70%),
		linear-gradient(180deg, #d9ccff 0%, #f4d7ff 45%, #ffe6ef 100%);
	border: 3px solid #fff;
	box-shadow: 0 10px 28px rgba(160, 90, 130, .18), inset 0 0 0 2px #f6d6e4;
}
.rko-stage::before { /* 鳥居の影 */
	content: "";
	position: absolute; left: 50%; top: 10px; width: 78%; max-width: 380px; height: 70%;
	transform: translateX(-50%);
	background:
		linear-gradient(#e46b76, #e46b76) 0 16px / 100% 12px no-repeat,
		linear-gradient(#e46b76, #e46b76) 6% 44px / 88% 8px no-repeat,
		linear-gradient(#e46b76, #e46b76) 16% 16px / 12px 100% no-repeat,
		linear-gradient(#e46b76, #e46b76) 84% 16px / 12px 100% no-repeat;
	border-radius: 6px;
	opacity: .16;
	pointer-events: none;
}
.rko-stage__sky { position: absolute; inset: 0; pointer-events: none; }
.rko-stage__sky .rko-ico { position: absolute; top: 8px; width: 46px; height: 46px; animation: rko-sway 3.6s ease-in-out infinite; transform-origin: 50% 0; }
.rko-stage__sky .rko-ico:first-child { left: 14px; }
.rko-stage__sky .rko-ico:last-child { right: 14px; animation-delay: -1.8s; }
@keyframes rko-sway { 0%, 100% { transform: rotate(-5deg); } 50% { transform: rotate(5deg); } }

.rko-tube-wrap { position: relative; width: min(64vw, 230px); aspect-ratio: 1 / 1.08; display: grid; place-items: center; }
.rko-ringsvg { position: absolute; inset: -6%; width: 112%; height: 112%; transform: rotate(-90deg); pointer-events: none; opacity: 0; transition: opacity .2s; }
.rko.is-charging .rko-ringsvg { opacity: 1; }
.rko-ringsvg circle { fill: none; stroke-width: 4; }
.rko-ringsvg__bg { stroke: rgba(255, 255, 255, .7); }
.rko-ringsvg__fg { stroke: var(--rko-pink); stroke-linecap: round; transition: stroke-dashoffset .06s linear; filter: drop-shadow(0 0 4px rgba(255, 127, 168, .7)); }

.rko-tube {
	--rko-amp: 4deg;
	position: relative;
	width: 78%;
	aspect-ratio: 200 / 250;
	padding: 0; margin: 0; border: 0; background: none;
	cursor: grab;
	touch-action: none;
	user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
	transform-origin: 50% 90%;
	animation: rko-idle 2.4s ease-in-out infinite;
	filter: drop-shadow(0 8px 10px rgba(120, 60, 80, .18));
}
.rko-tube:focus-visible { outline: 4px solid var(--rko-pink); outline-offset: 8px; border-radius: 16px; }
.rko-tube__svg { position: relative; z-index: 2; width: 100%; height: 100%; display: block; }
.rko-tube__txt { font: 900 21px "Zen Maru Gothic", "Hiragino Mincho ProN", serif; fill: var(--rko-red-d); }
@keyframes rko-idle { 0%, 100% { transform: rotate(-2deg) translateY(0); } 50% { transform: rotate(2deg) translateY(-4px); } }
.rko.is-charging .rko-tube { cursor: grabbing; animation: rko-shake .16s linear infinite; }
@keyframes rko-shake {
	0% { transform: rotate(calc(var(--rko-amp) * -1)) translateY(0); }
	50% { transform: rotate(var(--rko-amp)) translateY(-6px); }
	100% { transform: rotate(calc(var(--rko-amp) * -1)) translateY(0); }
}
.rko.is-drawn .rko-tube { animation: rko-settle .5s cubic-bezier(.3, 1.6, .5, 1) both; }
@keyframes rko-settle { 0% { transform: rotate(8deg); } 100% { transform: rotate(0); } }

/* 棒（筒の上の穴から出てくる） */
.rko-stick {
	position: absolute; z-index: 1;
	left: 50%; top: 14%;
	width: 9%; height: 66%;
	margin-left: -4.5%;
	border-radius: 6px 6px 3px 3px;
	background: linear-gradient(90deg, #d9b27a, #f4dcae 45%, #caa06a);
	border: 2px solid #8e5a3a;
	transform: translateY(40%);
	opacity: 0;
}
.rko-stick::before { content: ""; position: absolute; left: -2px; right: -2px; top: -2px; height: 16%; background: var(--rko-red); border-radius: 6px 6px 0 0; border: 2px solid #8e5a3a; }
.rko-stick__no {
	position: absolute; left: 50%; top: 22%; transform: translateX(-50%);
	writing-mode: vertical-rl;
	font-weight: 900; font-size: clamp(10px, 3vw, 14px); color: var(--rko-ink); letter-spacing: -.05em;
}
.rko.is-stick .rko-stick { opacity: 1; animation: rko-stick-up .75s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes rko-stick-up {
	0% { transform: translateY(40%); }
	60% { transform: translateY(-78%); }
	100% { transform: translateY(-68%) rotate(-4deg); }
}

.rko-number {
	position: absolute; z-index: 5; left: 50%; top: 50%;
	transform: translate(-50%, -50%) scale(.4);
	display: flex; align-items: baseline; gap: 6px;
	padding: 12px 26px;
	border-radius: 999px;
	background: #fffaf0;
	border: 4px solid var(--rko-red);
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .7), 0 12px 30px rgba(170, 60, 90, .3);
	color: var(--rko-red-d);
	opacity: 0;
	white-space: nowrap;
}
.rko-number b { font-size: 2.6rem; font-weight: 900; line-height: 1; }
.rko-number__k { font-size: 1.2rem; font-weight: 900; }
.rko-number.is-in { animation: rko-pop .5s cubic-bezier(.2, 1.6, .4, 1) both; }
@keyframes rko-pop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.3); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }

.rko-hint { margin: 12px 0 0; min-height: 1.6em; font-size: .9rem; font-weight: 700; color: var(--rko-sub); text-align: center; line-height: 1.6; }

/* ---------- 光・花びら ---------- */
.rko-fx { position: fixed; inset: 0; pointer-events: none; z-index: 60; overflow: hidden; }
.rko-petal, .rko-spark {
	position: absolute; top: -30px;
	animation-name: rko-fall; animation-timing-function: linear; animation-fill-mode: both;
}
.rko-petal { border-radius: 150% 0 150% 0; background: linear-gradient(135deg, #ffd3e2, #ff9fbf); box-shadow: inset -2px -2px 0 rgba(255, 255, 255, .5); }
.rko-spark { background: linear-gradient(135deg, #fff6c9, #f2c14e); clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); }
@keyframes rko-fall {
	0% { transform: translate(0, -20px) rotate(0); opacity: 0; }
	10% { opacity: 1; }
	100% { transform: translate(var(--rko-drift), 105vh) rotate(var(--rko-rot)); opacity: .85; }
}
.rko-rays {
	position: absolute; left: 50%; top: 230px; width: 720px; height: 720px; margin: -360px 0 0 -360px;
	pointer-events: none; z-index: 0; opacity: 0;
	background: repeating-conic-gradient(from 0deg, rgba(255, 221, 120, .55) 0 8deg, rgba(255, 221, 120, 0) 8deg 20deg);
	-webkit-mask: radial-gradient(circle, #000 0 30%, transparent 62%);
	mask: radial-gradient(circle, #000 0 30%, transparent 62%);
}
.rko.rko-glow-4 .rko-rays { opacity: .55; animation: rko-spin 18s linear infinite, rko-fadein 1s ease both; filter: hue-rotate(-30deg); }
.rko.rko-glow-5 .rko-rays { opacity: .9; animation: rko-spin 12s linear infinite, rko-fadein 1s ease both; }
@keyframes rko-spin { to { transform: rotate(360deg); } }
@keyframes rko-fadein { from { opacity: 0; } }

.rko-rareflash {
	position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; pointer-events: none;
	background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 214, 231, .85) 50%, rgba(255, 214, 231, 0) 80%);
	animation: rko-flash 1.6s ease both;
}
.rko-rareflash p {
	margin: 0; padding: 14px 28px; border-radius: 999px;
	background: linear-gradient(90deg, #d9434f, #ff7fa8); color: #fff;
	font-size: 1.3rem; font-weight: 900; letter-spacing: .08em;
	box-shadow: 0 0 0 4px #fff, 0 10px 30px rgba(217, 67, 79, .4);
}
@keyframes rko-flash { 0% { opacity: 0; } 15% { opacity: 1; } 80% { opacity: 1; } 100% { opacity: 0; } }

/* ---------- 結果の紙 ---------- */
.rko-result { position: relative; z-index: 1; }
.rko-done {
	display: flex; align-items: center; justify-content: center; gap: 8px;
	margin: 0 0 10px; padding: 8px 12px; border-radius: 14px;
	background: #fff; border: 2px dashed #f3c2d4;
	font-weight: 800; font-size: .9rem; color: var(--rko-sub);
}
.rko-paper {
	position: relative;
	padding: 20px 18px 22px;
	border-radius: 10px;
	background:
		repeating-linear-gradient(0deg, rgba(210, 180, 140, .06) 0 2px, transparent 2px 6px),
		var(--rko-paper);
	border: 3px solid var(--rko-red);
	outline: 2px solid var(--rko-red);
	outline-offset: -10px;
	box-shadow: 0 16px 36px rgba(160, 80, 110, .18);
	text-align: center;
}
.rko-paper::before, .rko-paper::after { /* 巻物の軸 */
	content: ""; position: absolute; left: -8px; right: -8px; height: 14px;
	border-radius: 8px; background: linear-gradient(180deg, #e6b84a, #b8872a); border: 2px solid #8e5a3a;
}
.rko-paper::before { top: -10px; }
.rko-paper::after { bottom: -10px; }
.rko-paper.is-open { animation: rko-unroll .95s cubic-bezier(.22, 1, .36, 1) both; }
@keyframes rko-unroll {
	0% { clip-path: inset(0 0 100% 0); transform: translateY(-12px); }
	100% { clip-path: inset(-20px -20px -20px -20px); transform: none; }
}
.rko-paper.rko-tier-5 { border-color: var(--rko-gold); outline-color: var(--rko-gold); box-shadow: 0 0 0 4px #fff3c8, 0 0 40px rgba(240, 190, 70, .55), 0 16px 36px rgba(160, 80, 110, .18); }
.rko-paper.rko-tier-4 { box-shadow: 0 0 0 4px #ffe1ec, 0 0 32px rgba(255, 127, 168, .45), 0 16px 36px rgba(160, 80, 110, .18); }

.rko-paper__head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding: 4px 8px 10px; border-bottom: 2px dotted var(--rko-line); }
.rko-paper__no { font-weight: 900; color: var(--rko-red-d); font-size: 1.05rem; letter-spacing: .06em; }
.rko-paper__date { font-size: .8rem; color: var(--rko-sub); font-weight: 700; }
.rko-paper__rank { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 0 6px; }
.rko-stamp {
	--rko-tc: var(--rko-red);
	display: grid; place-items: center;
	width: 104px; height: 104px; border-radius: 50%;
	background: var(--rko-tc); color: #fff;
	font-size: 3.3rem; font-weight: 900; line-height: 1;
	box-shadow: 0 0 0 5px #fff, 0 0 0 8px var(--rko-tc), 0 8px 20px rgba(0, 0, 0, .12);
}
.rko-paper.is-open .rko-stamp { animation: rko-stamp .6s .45s cubic-bezier(.2, 1.7, .4, 1) both; }
@keyframes rko-stamp { 0% { transform: scale(2.4) rotate(-20deg); opacity: 0; } 100% { transform: scale(1) rotate(-6deg); opacity: 1; } }
.rko-rank { margin: 6px 0 0; font-size: clamp(1.5rem, 6.5vw, 2rem); font-weight: 900; color: var(--rko-red); letter-spacing: .06em; line-height: 1.3; }
.rko-paper.rko-tier-5 .rko-rank { color: #c28a12; text-shadow: 0 2px 0 #fff3c8; }
.rko-paper__img { margin: 10px auto 4px; max-width: 360px; border-radius: 16px; overflow: hidden; border: 3px solid #fff; box-shadow: 0 6px 18px rgba(0, 0, 0, .12); }
.rko-paper__img img { display: block; width: 100%; height: auto; }
.rko-paper__who { margin: 12px 0 2px; font-size: .78rem; font-weight: 800; color: var(--rko-sub); letter-spacing: .1em; }
.rko-msg { margin: 0 auto 8px; max-width: 30em; font-size: 1.02rem; font-weight: 800; line-height: 1.85; }
.rko-streak3 { margin: 4px auto 8px; padding: 8px 12px; border-radius: 12px; background: #fff3c8; font-weight: 800; font-size: .88rem; }
.rko-voice { margin: 8px 0; }

.rko-sec { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 16px 0 8px; font-size: .98rem; font-weight: 900; color: var(--rko-red-d); }
.rko-cats, .rko-lucky { margin: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; text-align: left; }
.rko-cat, .rko-lk { padding: 9px 10px; border-radius: 12px; background: #fff; border: 1.5px solid var(--rko-line); min-width: 0; }
.rko-cat dt, .rko-lk dt { display: flex; align-items: center; justify-content: space-between; gap: 4px; flex-wrap: wrap; font-weight: 900; font-size: .86rem; color: var(--rko-ink); }
.rko-cat dd, .rko-lk dd { margin: 4px 0 0; font-size: .84rem; line-height: 1.6; color: var(--rko-ink); overflow-wrap: anywhere; }
.rko-lk dt { font-size: .76rem; color: var(--rko-sub); }
.rko-lk dd { font-weight: 800; display: flex; align-items: center; gap: 6px; }
.rko-lk.is-wide { grid-column: 1 / -1; }
.rko-stars { display: inline-flex; gap: 1px; }
.rko-star { width: 13px; height: 13px; background: #eadfd3; clip-path: polygon(50% 0, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.rko-star.is-on { background: linear-gradient(180deg, #ffd766, #e8a820); }
.rko-swatch { width: 18px; height: 18px; border-radius: 50%; flex: none; border: 2px solid var(--rko-ink); }

.rko-todo { margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; background: #fff0f6; border: 2px dashed #f7b6cf; text-align: left; }
.rko-todo[hidden] { display: none; }
.rko-todo__label { display: flex; align-items: center; gap: 6px; font-size: .78rem; font-weight: 800; color: var(--rko-sub); }
.rko-todo__label .rko-ico { width: 22px; height: 22px; }
.rko-todo__link { display: block; margin-top: 4px; font-weight: 900; color: #d23c78; text-decoration: none; line-height: 1.6; }
.rko-todo__link:hover { text-decoration: underline; }

.rko-share { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 16px; }
.rko-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 6px;
	min-height: 46px; padding: 8px 18px; border-radius: 999px;
	border: 2px solid #f3b6cc; background: #fff; color: #c2386f;
	font: inherit; font-weight: 900; font-size: .95rem; text-decoration: none; cursor: pointer;
	box-shadow: 0 4px 0 #f3c6d6;
	transition: transform .12s, box-shadow .12s;
}
.rko-btn:active { transform: translateY(3px); box-shadow: 0 1px 0 #f3c6d6; }
.rko-btn:focus-visible { outline: 3px solid var(--rko-pink); outline-offset: 3px; }
.rko-btn--main { background: linear-gradient(180deg, #ff8fb4, #f0548a); color: #fff; border-color: #e04a7e; box-shadow: 0 4px 0 #c23a6a; }
.rko-btn--main:active { box-shadow: 0 1px 0 #c23a6a; }
.rko-btn .rko-ico { width: 26px; height: 26px; }
.rko-again { margin: 18px 0 0; text-align: center; font-size: .88rem; color: var(--rko-sub); font-weight: 700; }

/* ---------- タブ ---------- */
.rko-tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 26px 0 0; }
.rko-tab {
	display: flex; align-items: center; justify-content: center; gap: 4px;
	min-height: 48px; padding: 6px 4px; border-radius: 16px 16px 0 0;
	border: 2px solid #f5cfdd; border-bottom: 0; background: #fff4f8; color: var(--rko-sub);
	font: inherit; font-weight: 900; font-size: .9rem; cursor: pointer;
}
.rko-tab[aria-selected="true"] { background: #fff; color: var(--rko-red-d); box-shadow: 0 -3px 0 var(--rko-pink) inset; }
.rko-tab:focus-visible { outline: 3px solid var(--rko-pink); outline-offset: -3px; }
.rko-tab .rko-ico { width: 26px; height: 26px; }
.rko-panel { padding: 14px 12px 16px; border: 2px solid #f5cfdd; border-radius: 0 0 18px 18px; background: #fff; }
.rko-panel__lead { margin: 0 0 12px; font-size: .86rem; line-height: 1.7; color: var(--rko-sub); font-weight: 700; }
.rko-panel__lead b { color: var(--rko-red-d); }

.rko-book { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 8px; }
.rko-book__it { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 10px; border-radius: 14px; background: var(--rko-paper); border: 2px solid var(--rko-line); text-align: center; }
.rko-book__it.rko-tier-5 { border-color: #f2d27a; background: #fffbea; }
.rko-book__stamp { --rko-tc: #ccc; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--rko-tc); color: #fff; font-size: 1.6rem; font-weight: 900; box-shadow: 0 0 0 3px #fff, 0 0 0 5px var(--rko-tc); }
.rko-book__name { font-size: .92rem; margin-top: 6px; }
.rko-book__meta { font-size: .78rem; font-weight: 800; color: var(--rko-red-d); }
.rko-book__first { font-size: .68rem; color: var(--rko-sub); }
.rko-book__it.is-locked { opacity: .45; filter: grayscale(.8); border-style: dashed; }
.rko-book__it.is-locked .rko-book__stamp { background: #efe7ea; box-shadow: none; }
.rko-ico--lock { width: 30px; height: 30px; }
.rko-book__rare { display: flex; align-items: center; gap: 6px; margin: 12px 0 0; padding: 8px 10px; border-radius: 12px; background: #fff0f6; font-size: .84rem; font-weight: 800; }
.rko-book__rare.is-locked { opacity: .55; }

.rko-streak { display: flex; align-items: center; gap: 10px; padding: 10px 12px; margin-bottom: 12px; border-radius: 14px; background: linear-gradient(90deg, #fff6e2, #fff0f6); }
.rko-streak .rko-ico { width: 44px; height: 44px; }
.rko-streak div { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.rko-streak b { font-size: 1.1rem; color: var(--rko-red-d); }
.rko-streak span { font-size: .8rem; color: var(--rko-sub); font-weight: 700; }
.rko-cal__nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rko-cal__btn { width: 44px; height: 44px; border-radius: 50%; border: 2px solid #f5cfdd; background: #fff; color: var(--rko-red-d); font-size: 1.4rem; font-weight: 900; cursor: pointer; line-height: 1; }
.rko-cal__btn:disabled { opacity: .35; cursor: default; }
.rko-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.rko-cal__w { text-align: center; font-size: .72rem; font-weight: 800; color: var(--rko-sub); padding-bottom: 2px; }
.rko-cal__c { --rko-tc: transparent; position: relative; aspect-ratio: 1; border-radius: 10px; background: #faf5f7; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; }
.rko-cal__c.is-pad { background: none; }
.rko-cal__c i { font-style: normal; font-size: .66rem; font-weight: 700; color: var(--rko-sub); line-height: 1; }
.rko-cal__c b { font-size: .9rem; line-height: 1.1; }
.rko-cal__c.is-drawn { background: var(--rko-tc); }
.rko-cal__c.is-drawn i, .rko-cal__c.is-drawn b { color: #fff; }
.rko-cal__c.is-today { box-shadow: 0 0 0 2px var(--rko-pink); }
.rko-cal__c.is-future { opacity: .45; }
.rko-cal__rare { position: absolute; top: 3px; right: 3px; width: 7px; height: 7px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 2px #ffd766; }
.rko-cal__sum { margin: 10px 0 6px; font-size: .84rem; font-weight: 800; text-align: center; }
.rko-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 12px; font-size: .74rem; color: var(--rko-sub); font-weight: 700; }
.rko-legend li { display: flex; align-items: center; gap: 4px; }
.rko-legend i { width: 12px; height: 12px; border-radius: 4px; }

.rko-titles { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.rko-title { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 14px; background: var(--rko-paper); border: 2px solid var(--rko-line); }
.rko-title div { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.rko-title b { font-size: .95rem; }
.rko-title span { font-size: .76rem; color: var(--rko-sub); font-weight: 700; }
.rko-title.is-got { border-color: #f2d27a; background: #fffbea; }
.rko-title.is-locked { opacity: .5; border-style: dashed; }
.rko-ico--ok { width: 24px; height: 24px; }

/* ---------- シェア画像モーダル ---------- */
.rko-modal { position: fixed; inset: 0; z-index: 9999; display: grid; place-items: center; padding: 16px; background: rgba(60, 30, 45, .55); }
.rko-modal[hidden] { display: none; }
.rko-modal__box { width: min(420px, 100%); max-height: calc(100vh - 32px); overflow: auto; padding: 14px; border-radius: 20px; background: #fff; text-align: center; }
.rko-modal__title { margin: 0 0 8px; font-weight: 900; color: var(--rko-red-d); }
.rko-modal__img { display: block; width: 100%; max-height: 58vh; object-fit: contain; border-radius: 12px; }
.rko-modal__note { margin: 8px 0 0; font-size: .8rem; color: var(--rko-sub); }

/* ---------- 横持ち・PC ---------- */
@media (orientation: landscape) and (max-height: 520px) {
	.rko-stage { min-height: 0; padding: 10px; flex-direction: row; gap: 16px; }
	.rko-tube-wrap { width: min(34vh, 180px); }
	.rko-hint { max-width: 16em; text-align: left; }
	.rko-number { top: 50%; }
	.rko-hud { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (min-width: 720px) {
	.rko { max-width: 720px; }
	.rko-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rko-lucky { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rko-chip__l { font-size: .74rem; }
}
@media (max-width: 360px) {
	.rko-hud { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.rko-cats, .rko-lucky { grid-template-columns: 1fr; }
	.rko-tab { font-size: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
	.rko-tube, .rko.is-charging .rko-tube, .rko-stage__sky .rko-ico, .rko-rays,
	.rko.rko-glow-4 .rko-rays, .rko.rko-glow-5 .rko-rays { animation: none !important; }
	.rko-paper.is-open, .rko-paper.is-open .rko-stamp, .rko-number.is-in, .rko.is-stick .rko-stick { animation-duration: .01s !important; animation-delay: 0s !important; }
	.rko-fx { display: none; }
}

/* hidden 属性を必ず効かせる（display を指定したクラスより強く） */
.rko [hidden] { display: none !important; }

/* スマホ縦：HUD はアイコンを上にして文字を切らさない・タブは1行 */
@media (max-width: 560px) {
	.rko-chip { grid-template-columns: 1fr; grid-template-rows: auto auto auto; justify-items: center; text-align: center; padding: 6px 4px; row-gap: 1px; }
	.rko-chip .rko-ico { grid-row: auto; width: 24px; height: 24px; }
	.rko-chip__l { font-size: .66rem; max-width: 100%; }
	.rko-tab { font-size: .84rem; white-space: nowrap; gap: 3px; }
	.rko-tab .rko-ico { width: 22px; height: 22px; }
}